The CSS opacity property fails to function properly on Google Chrome

While it is functioning correctly on Firefox, there seems to be an issue with Chrome. I am attempting to have a card apply the opacity property when hovered over.

Here is the HTML file:

<div class="col mb-4">
        <a class="textoc"href="user/terapeuticos">
          <div class="card carta">
          
            <img src="../../../assets/imagenes/Fondo1.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title subtitulo2 text-center rounded">Masajes terapéuticos</h5>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
          </div>

        </a>
        
</div>

CSS file:

.textoc:link
{
  
  opacity: 1!important;
  text-decoration: none;
  color:black;
  background-color: rgba(255, 255, 255, 1);
  
}

.textoc:hover
{
  opacity: 0.5!important;
  background-color: rgba(255, 255, 255, 0.5);
  
}

.textoc:visited
{
  color: black;
  
}

.carta
{
  border-style: solid;
  border-color: #F3329F;
  border-width: 2px;
  
}

.subtitulo2
{
  
  color:#F3329F;
  border-style: solid;
  border-color: #F3329F;
  border-width: 1px;
}

I attempted to address the issue by including 

background-color: rgba(255, 255, 255, 0.5);
, but unfortunately saw no change in the behavior.

PS: Using Bootstrap 4 framework for this project.

htmlcssgoogle-chromebootstrap-4

Answer №1

Upon closer inspection, it appears the issue lies in adjusting the opacity of the a(.textoc) element. The correct approach is to modify the opacity of the image within that specific anchor tag.

.textoc img:hover{
 opacity: 0.5;
 background-color: rgba(255, 255, 255, 0.5);}

Answer №2

To achieve the desired effect, you must target the .card element within the .textoc:hover selector.

.textoc:hover .card {
  opacity: 0.5;
}

Check out this example on jsfiddle

Answer №3

To ensure that Chrome recognizes changes in opacity, it is important to specify display: block for the .textoc element. By default, anchor tags in Chrome are set to inline.

It is advised not to rely on using !important unnecessarily in CSS as it is often viewed as a bad practice.

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

Ensure that the jQuery Knob is set to submit any modifications only after the final adjustment

Utilizing jQuery Knob by anthonyterrien, I have configured the step to be 20. My goal is to transmit the knob's value to the server. The issue arises when the change function is triggered every time the user adjusts the knob using either a right or le ...

javascriptjqueryhtmlajaxjquery-knob

Insert between the top navigation bar and the sidebar menu

I am currently in the process of designing my very first website and I have encountered a bit of trouble. I would like to add a page between a navbar and a vertical bar, and I want this page to be displayed when a button on the vertical bar is clicked. You ...

phphtmlcss

Centering all td elements except for those with a specific class

Consider the following code snippets: <tr> <td class="foo">chuchu</td> <td>chuchu</td> <td>chuchu</td> <td>chuchu</td> <td>chuchu</td> </tr> Is there a way to center align thes ...

phphtmlcss

The conversion of string to number is not getting displayed correctly when using console.log or document.write. Additionally, the concatenated display is also not functioning as intended

Being new to JS and HTML, this program was created to enhance my understanding of the concepts. I attempted a basic program to convert a string to a number in three different ways, but I am having trouble determining if the conversion actually took place. ...

javascripthtmltype-conversionconsole.logdocument.write

Having trouble with your website div not appearing correctly on Firefox?

I'm facing an issue with the display of a website (found here). The elements inside the div with the class name of .index_container are not appearing correctly in Firefox. Despite being present, they remain invisible. I've attempted to resolve th ...

htmlcssfirefoxsass

Stopping videos in the JQuery Cycle Plugin triggers the stop event

Currently, I have a simple cycle set up with YouTube videos using the following code: <script type="text/javascript"> $(document).ready(function () { $('#cycle').cycle({ fx: 'fade', sp ...

javascripthtmljqueryjquery-events

Is there a way to determine the names of the functions that are being called?

I'm working on mastering Google Development Tools. Is there a way to determine which specific functions, especially those in Javascript, are needed before a page can load successfully? ...

javascripthtmlconsoleload

Formatting code within an HTML document

I am attempting to customize a stock widget that I obtained from financialcontent.com. My current approach involves using Bootstrap for styling purposes. To incorporate the widget into a div, I found it necessary to embed the script directly within the HT ...

javascripthtmlcsstwitter-bootstrapweb

Toggle the class and execute the order within a jQuery script

When the mouse moves in, the jQuery trigger enters the status. $(".test").bind("mouseenter mouseout", function(event) { $(this).toggleClass("entered"); alert("mouse position (" + event.pageX + "," + event.pageY + ")"); }); .entered { ...

javascriptjqueryhtmlcss

Harness the power of Ionic by utilizing the same HTML template across various pages, while easily customizing the content

I need help with streamlining my Ionic app that has multiple pages with similar HTML structures but different content. Is there a way to use just one HTML file and dynamically fill in the content? Should I use a controller for each page, or is there a more ...

javascripthtmlangularjsionic-framework

Implementing a backdrop while content is floating

I am facing an issue with a div that has 2 columns. The height of the left column is dynamically changing, whereas the right column always remains fixed in height. To achieve this, I have used the float property for both column divs within the container di ...

htmlcss

Images do not appear on Bootstrap Carousel as expected

I am facing an issue where the images are not displaying on my bootstrap carousel or when I try to display them individually using their class. I am utilizing bootstrap and express for my project. I have verified multiple times that the file path to the im ...

javascripthtmlexpresstwitter-bootstrap-3

The one-click button is functional on larger screens, while on mobile devices, only a double click will register

I am facing an issue in angular where a button works perfectly fine with one click on larger screens, such as Macbook. However, on iPhone, it requires a double click to function properly (it works fine on Android too). The alert triggers with a single cl ...

javascriptcssbuttononclickdouble-click

Is there a way for me to replicate the reloading problem that occurs when a button is clicked within an HTML

Recently, I encountered a problem with our company's Web product where pressing a certain button resulted in the entire page being reloaded. This issue reminded me of a similar situation described on this website. Following the solution provided there ...

javascripthtml

After sending a test email, inline CSS in Gmail seems to be functioning to some extent

While working on applying inline CSS styling to HTML for email, I have encountered an issue where the styling partially works when sending a test email. Can anyone provide guidance on how to resolve this problem? Steps to reproduce: Step 1 - apply CSS st ...

htmlcsshtml-emailinline-styles

What is the best way to create a timer using JavaScript?

I'm looking for a reverse timer to track session timeout. I found a code on codepen that works as a clockwise timer, but my attempts to make it counterclockwise have failed. Can someone please suggest a solution? I want the timeout to be either 1 hour ...

javascripthtmlcss

Dealing with repeated parameters in a URLHow can you handle duplicate

My Ajax select input dynamically changes the URL without refreshing the page. However, I have encountered an issue where repeated parameters stack in the URL when the select input is changed multiple times: [domain]/find.php?cat=1#pricemin=10&pricem ...

javascriptjqueryhtmlajaxurl

Utilizing either Maps or Objects in Typescript

I'm in the process of developing a simple Pizza Ordering App. The concept is, you select a pizza from a list and it's added to a summary that groups all the selections together. Here's how I want it to appear: Pizza Margarita 2x Pizza Sala ...

javascripthtmlangulartypescript

Obtain the WordPress footer while applying a specific CSS rule

I need to customize my Wordpress template so that a specific css class is applied to a certain element. Currently, I am loading the footer in my templates using the <?php get_footer(); ?> function. However, I would like to load the footer with the . ...

phphtmlcsswordpress

Center the image within the div by setting its position to absolute

<div class='img-box'> <img /> //position absolute <img /> //position absolute <img /> //position absolute <img /> //position absolute I am struggling to center the images within this div because of their absolute p ...

javascriptjqueryhtmlcss