Tag: css

How to achieve an effect where an item fades in when it comes into view and fades out when it goes out of view?

Advertisements Fade-in effect for a button when the user scrolls down and button comes into view and a fade-out effect when the user continue scrolls down and button goes out of view. var scrollButton = $(‘#scrollButton’); scrollButton.css(‘opacity’, ‘0’); $(window).scroll(function() { var scrollPos = $(this).scrollTop(); if (scrollPos > 100) { scrollButton.css(‘opacity’, ‘1’); } else { scrollButton.css(‘opacity’,… Read More How to achieve an effect where an item fades in when it comes into view and fades out when it goes out of view?

MRLeave a comment

transform:translate(-50%,-50%) doesn't work well with transform:scale()

Advertisements I am centering my element with class "play__circle" using position: absolute; (parent container is set to position:relative;) but when I use transform:scale() then the element doesn’t stay in the center anymore. Initially the "play__circle" his hidden, but on hover its opacity is set to 1 and scale(0.7). .container{ width: 200px; height: 250px; background-color: rgba(208,… Read More transform:translate(-50%,-50%) doesn't work well with transform:scale()

MRLeave a comment

How to add style to html element using javascript

Advertisements I want to add style="font-weight: bold;" to the label tag of the html below: <label for="Results_CheckZ" style="font-weight: bold;">Sample content</label> <div id="Results_CheckZField" class="field-normal both checkZ"> <div class="field-control"> <div class="container-normal"> <label for="Results_CheckZ">Sample content</label> </div> </div> </div> I tried the following but it didn’t work. I don’t know how to get the label tag when it doesn’t… Read More How to add style to html element using javascript

MRLeave a comment

How do I make a text grow from the center of a button?

Advertisements I’m trying to create a home page where there are 6 buttons and when a user pass the cursor hover them they shrink and a text expand from the center of each button. I managed to get this: body { background-color: white; } .button-container { position: relative; display: flex; justify-content: center; align-items: center; height:… Read More How do I make a text grow from the center of a button?

MRLeave a comment

Alternating rows background – updating dynamically when hiding/showing rows with css only?

Advertisements I have a table ".report" and it should have alternating background for its rows. The UI allows users to hide and show rows dynamically and I want the background of the rows to keep the pattern at all times. I implemented the solution where I add the ".hidden" class to the hidden rows and… Read More Alternating rows background – updating dynamically when hiding/showing rows with css only?

MRLeave a comment

Why inline-block doesn't work on my code?

Advertisements I’m setting inline-block to div but it doesn’t work, only inline-flex works I want result like below, but it’s riches only when I set inline-flex #account_corner { display: inline-block; position: relative; vertical-align: top; float: none; white-space: nowrap; } <div id=”account_corner”> <img style=”height: 40px;” alt=”account_photo” src=”https://media.istockphoto.com/id/1300845620/vector/user-icon-flat-isolated-on-white-background-user-symbol-vector-illustration.jpg?s=612×612&amp;w=0&amp;k=20&amp;c=yBeyba0hUkh14_jgv1OKqIH0CCSWU_4ckRkAoy2p73o=”&gt; <div style=”display: block;”> <span style=”margin: 0 5px;”>Example</span> <p style=”margin:… Read More Why inline-block doesn't work on my code?

MRLeave a comment