Opacity problem when hovering on Chrome

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;

}

Answer №1

Could you kindly share your code with us?

When I try transitioning, everything seems to work well so that might be the issue.

.griditemsmall {
    display: inline-block;
    background-color: #171818;
    margin-bottom: 20px;
    height: 260px;
    -webkit-transition: all 300ms ease-in-out; /* This was added */
    -moz-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

Alternatively, something like:

.gridbottomentertainment, .griditemsmall {
    -webkit-transition: all 300ms ease-in-out; /* This was added */
    -moz-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to modify the color of the active tab I have chosen?

I've designed a tab menu using Divs and CSS, but I'm facing an issue with changing the color of the selected tab. I tried adjusting the background color of the .tab class, but it seems to only work for part of the tab... You can view the problem ...

Experience the latest HTML5 features directly within a Java desktop GUI, with seamless communication through

This Java desktop GUI utilizes a Java-based web services communication layer along with an HTML library to provide powerful charting and interactivity. I am looking to integrate an HTML5 view within the Java GUI. Can someone assist me in managing JavaScri ...

What is the best way to exclude blank fields when displaying a form for printing?

I have a form created using PHP. Although it displays correctly, I would like it to check each field and exclude any div/element/field that is left empty when I choose to print the form. Below is an example of the form code in the printable PHP file. If n ...

Responsive Design and the Importance of Setting Min-Width in Bootstrap 3

After doing some research on Stack Overflow about defining a minimum width for a responsive layout in Bootstrap3, I encountered conflicting answers related to "media queries." My goal is to make my layout responsive up to a certain point. Once it reaches, ...

Why do my cards keep shrinking instead of moving to a new column when using flexbox and flex-flow?

I'm facing an issue with my flexbox that is causing my items to constantly shrink instead of moving to a new row. I've tried various solutions but nothing seems to work. I have removed the CSS for elements like headers that I believe are unrelate ...

JavaScript expression not being processed

What could be the reason behind not receiving the value for dish.price, dish,description, etc.? Where am I making a mistake in this code snippet? <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="utf-8"> < ...

Vanishing Span in CSS3 Flexboxes

I came across this particular HTML code: <div class="panel panel-info"> <div class="panel-heading">Person</div> <div class="panel-body"> <div class="data"> <p class="keys"> ...

Troubleshooting Issues with Integrating Bootstrap Carousel

UPDATE: When I attempt to click on either the left or right icons, it unexpectedly scrolls me down to the bottom of the page. It seems to be related to the #truespeed aspect. The carousel functions perfectly when it is on a standalone page but causes issue ...

What is the best way to hide the black icons (x) and bars on larger screens and which specific CSS code should I use to achieve this?

I'm attempting to display menu icons only on smaller screens like phones or tablets, and text on larger screens such as laptops or desktops. I've experimented with adjusting the media query and CSS, but haven't had any success. What specific ...

JavaScript Deviance

I am facing an issue with my JS code while trying to send form data to a .php file via AJAX. The problem occurs when the input fields are filled - for some reason, my client-side page refreshes and the php file does not get executed. However, everything wo ...

Incorporating AJAX functionality into anchor interactions while preserving href links for search engine optimization benefits

Is it possible to create a link/button that triggers an AJAX/jQuery function to load new content, while still providing a link to the same content on a separate page? I am particularly concerned about SEO and how search engine crawlers will index my sitem ...

Is there a way to arrange the components of my form so that the questions are positioned on the left side and the choices are displayed on the right

As I am creating a form, my goal is to align the information within it in a way that places the questions on the left side and the options on the right. I have experimented with utilizing IDs, centering them, and adjusting their positioning from left to r ...

Creating a dynamic table in HTML with Angular by programmatically inserting rows using components

There's a peculiar issue that I'm facing and I just can't seem to figure out why it's happening. My goal is to display an HTML table using Angular 4. When I use the following syntax to output the table, everything works perfectly: < ...

how to prevent autoscrolling in an angular application when overflow-x is set to

In my socket event, I am using $scope.items.unshift(item) to place the new item at the top of the list. The html code includes <ol ng-repeat="item in items"><li>{{item.name}}</li></ol> An issue arises when a new item is added whil ...

Conceal the background of the lower div when the top div is displayed

I am struggling to figure out how to achieve this, or if it can even be done: <body> has a background image <div parent> has a background image <div child></div> does not have a background </div> My goal is to make the chi ...

Tips for maintaining video height consistency while adjusting its attributes

When you click on a button, the video's poster and src attributes change. However, after clicking, the video height briefly becomes 0, causing an unsightly effect on the entire page. How can this be avoided? Please note - lorem.mp4 and ipsum.mp4 hav ...

The input field cannot accommodate the lengthy value in the Mat Select option

When a user selects a value in my mat select, it doesn't display well in the selection box. The text wraps when the selection is opened, but once a choice is made, it gets cut off without proper spacing between the ellipses and the dropdown arrow. Th ...

"Implementing a form submission feature in React.js that dynamically applies a class to the result element

I recently developed a basic BMI calculator using React.js. I am now attempting to implement a feature where if the calculated BMI result falls outside the range of a healthy BMI, the result text will be displayed in red color (I am utilizing styled-compon ...

What is the syntax for creating a link tag with interpolation in Angular 2 / Ionic 2?

As I work on developing an app using Ionic 2/Angular 2, I have encountered a challenge that I am struggling to overcome. Let me provide some context: I am retrieving multiple strings from a webservice, and some of these strings contain links. Here is an e ...

Modifying the calendar from a 7-day week to a 5-day week

I am currently in the process of developing a 7-day calendar (Sunday to Saturday) which is functioning well. However, I am interested in adding an option to switch it to a 5-day calendar (Monday to Friday). I was wondering if there is a way to modify the e ...