CSS – Mouse hover effect

Posted in: Newspaper
Post count: 33
Mido
#40263
Mar 5, 2015 at 2:13 am

Hi all,

i need help please about mouse hover effect in Newsmag tech version

the block in mid page contains one big and 4 anther images

td-big-grid-overlay:after {
bottom: 0;
content: “”;
display: block;
height: 100%;
width: 100%;
position: absolute;
z-index: 0;
opacity: 1;
background: -moz-linear-gradient(45deg, rgba(205, 132, 36, 0.1) 0%, rgba(25, 166, 124, 0.1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(205, 132, 36, 0.1)), color-stop(100%, rgba(25, 166, 124, 0.1)));
background: -webkit-linear-gradient(45deg, rgba(205, 132, 36, 0.1) 0%, rgba(25, 166, 124, 0.1) 100%);
background: -o-linear-gradient(45deg, rgba(205, 132, 36, 0.1) 0%, rgba(25, 166, 124, 0.1) 100%);
background: -ms-linear-gradient(45deg, rgba(205, 132, 36, 0.1) 0%, rgba(25, 166, 124, 0.1) 100%);
background: linear-gradient(45deg, rgba(205, 132, 36, 0.1) 0%, rgba(25, 166, 124, 0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#1acd8424′, endColorstr=’#1a19a67c’, GradientType=1);
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-khtml-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;

so please what any of the codes above responsible for hover effect to added it to Newspaper slider images.

sorry for my bad English.

Thanks

Post count: 7909
Alin [tagDiv]
#40288
Mar 5, 2015 at 10:48 am

Hi,

Please try this css in Theme Panel > Custom Css: http://screencast.com/t/1m2Ipjsqwn

.td_block_big_grid .entry-thumb{
opacity: 0.9;
background: -moz-linear-gradient(45deg, rgba(205, 132, 36, 0.1) 0%, rgba(25, 166, 124, 0.1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(205, 132, 36, 0.1)), color-stop(100%, rgba(25, 166, 124, 0.1)));
background: -webkit-linear-gradient(45deg, rgba(205, 132, 36, 0.1) 0%, rgba(25, 166, 124, 0.1) 100%);
background: -o-linear-gradient(45deg, rgba(205, 132, 36, 0.1) 0%, rgba(25, 166, 124, 0.1) 100%);
background: -ms-linear-gradient(45deg, rgba(205, 132, 36, 0.1) 0%, rgba(25, 166, 124, 0.1) 100%);
background: linear-gradient(45deg, rgba(205, 132, 36, 0.1) 0%, rgba(25, 166, 124, 0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#1acd8424′, endColorstr=’#1a19a67c’, GradientType=1);
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-khtml-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}

Thanks!

Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.