Work in progress:
Hello everyone, I'm facing an issue with a hover effect that only seems to be occurring in Chrome. When hovering over a tile, the background color changes, the image opacity decreases, and an icon appears over the image.
In Chrome, the image seems to shift within the tile during the transition. However, in Firefox, everything works smoothly except when I started styling the footer.
The problem specifically affects the smaller tiles, as it works fine with the larger ones. Any suggestions for a possible solution are welcome.
I can provide code snippets if needed though the page source is available at the provided link.
This website is part of an assignment in collaboration with journalism students.
Below is the code responsible for changing the image transparency on hover:
.griditemsmall a:hover img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-o-transition: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
-webkit-opacity: 0.5;
display:inline-block;
padding-bottom: 0;
}
.griditemtall a:hover img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-o-transition: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
-webkit-opacity: 0.5;
display:inline-block;
padding-bottom: 0;
}
The following code is used to display the icons on hover:
.griditemtall a:hover .entypo-mute {
display:block;
margin-top: -180px;
}