Is it possible for CSS3 transitions to handle multiple tasks simultaneously? Let's experiment with Fiddle and find out

I am attempting to create a simple effect:

The div contains an image and text with a background of RGBA(255,255,255,0.5).

Upon hovering over the element, I want the image to decrease opacity and the background behind the text to disappear in a seamless transition.

Everything is functioning as expected, except when I try to apply a transition to both the image and the text. In this case, only the image transitions smoothly while the text's background remains unchanged.

Any insights on why this could be happening?

UPDATE: After testing in Firefox, the effect works perfectly. However, there seems to be an issue specifically with Chrome on Windows (latest version). Can someone else using Chrome/Windows confirm if they are experiencing the same issue?

You can view a demo here

Answer №1

Utilize the span::after selector to create a background while keeping the original span background transparent. This allows for the use of opacity instead of rgba().

Example: http://jsfiddle.net/ThinkingStiff/8Y7WJ/

CSS:

span{
    display:inline-block;
    position:relative;
    margin-bottom:10px; 
    left:0; 
    padding:5px 10px; 
    font-size:12px;
    z-index: 1;
   }
span::after {
    background-color: black;
    content: '\A0';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: -1;
}
img, span, span::after {
    -webkit-transition: all .6s; 
    -moz-transition: all 0.6s; 
    -ms-transition: all 0.6s; 
    -o-transition: all 0.6s; 
    transition: all .6s; 
}
div {
    position:relative;
}
div:hover span::after {
    opacity:0; 
}
div:hover span {
    bottom:40px;
}
div:hover img {
    opacity: 0.4;
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15);
}

HTML:

<div><img src="http://placekitten.com/250/350" />
<span>Some Text Here</span>
</div>

For an alternative approach, check out this demonstration using a <div> in place of ::after. This may help address any issues you were experiencing.

Example: http://jsfiddle.net/ThinkingStiff/7cP2R/

Answer №2

To create a smooth transition effect, it's crucial to establish clear starting and ending points. Instead of using "background none," opt for rgba(255,255,255,0) so that both the beginning and end match seamlessly.

Keep in mind that CSS doesn't interpret phrases like "background-color" -> "none" during transitions. It's better to stick with transparent, as "none" isn't a valid CSS value for background-color.

If you're experiencing issues, it could be due to some conflicting parts of your CSS. Eliminating the scaling elements might resolve the problem. Check out my alternative fiddle, which seems to work properly. Perhaps refining your code structure will help achieve the desired outcome? I substituted 'figure' for 'image,' but the behavior should remain consistent. I hope this information proves useful!

Here is your revised demo, and here's my example.

<figure>

    <figcaption>without scale</figcaption>

</figure>

<figure class="scale">

    <figcaption>with scale</figcaption>

</figure>

--

 .trans, figure, figcaption {

  -webkit-transition: all .5s linear; 
     -moz-transition: all .5s linear; 
       -o-transition: all .5s linear; 
          transition: all .5s linear; 
}

figure {
    position: relative;
    width: 20em;
    height: 10em;
    background-color: rgba(255,0,104,1);
}

figure:hover {
    background-color: rgba(255,0,104,.2);
}

figcaption {
    position: absolute;
    width: 100%;
    bottom: 0; left: 0;
    padding: 2em 1em;
    background-color: rgba(255,255,255,.8);
}

figure:hover figcaption {
    bottom: 20px;
    background-color: rgba(255,255,255,.0);
}

.scale:hover {
       -webkit-transform: scale(1.1, 1.1);
       -moz-transform: scale(1.1, 1.1);
       -ms-transform: scale(1.1, 1.1);
       -o-transform: scale(1.1, 1.1);
       transform: scale(1.1, 1.1);
   }

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 values can be used for the CSS Property "padding-right-ltr-source"?

Currently, I am facing an issue with box padding specifically in Firefox. Upon inspecting the affected span element, I noticed a property called "padding-right-ltr-source" with the value "physical". Here is the snippet of code: >padding: 0px 15px; ...

Creating CSS dynamically using PHP

Even after reading numerous blogs and forums, I'm still unable to get this working. My goal is to allow users to personalize their user account style sheet. I made sure to include <?php header("Content-type: text/css"); ?> at the beginning of t ...

"Effortless alignment: Centralizing CSS styling across the entire

I need help placing a loading spinner in the center of my screen, ensuring it works on both mobile and desktop devices. Here is my current CSS code: .spinner { width: 100px; height: 100px; position:absolute; top: 50%; left: 50%; margin: 100px ...

Traverse through an array of pictures and add the data to a Bootstrap placeholder within HTML markup

In my quest to create a function that populates placeholders in my HTML with images from an array, I am encountering a problem. Instead of assigning each image index to its corresponding placeholder index, the entire array of images is being placed in ever ...

A Firefox Browser View of a Next.js and Tailwind Website magnified for closer inspection

After creating a website using Next.js and Tailwind CSS, I noticed that the site is appearing zoomed in when viewed in Firefox. However, it looks fine in all other browsers. When I adjust the screen to 80%, the website displays correctly in Firefox. What ...

The candy stripes on a loading bar zebra assist in creating a unique and

I'm in the process of creating my portfolio and I'd like to incorporate unique animated loading bars, such as vertical or horizontal candy stripes, to showcase my coding skills. Can anyone suggest a specific programming language or tool that woul ...

Overlapping Dropdown Javascript Menus

To achieve the desired effect in the header, I need to create two expandable dropdown menus for the first two titles. My coding experience is limited, especially when it comes to javascript and jquery. Currently, I have managed to create the effect for one ...

Tips on aligning objects within div elements

I am currently in the process of learning how to create websites. Below is the body tag of my website: <body> <h1 id="title">Title</h1> <div id="loginContainer"> <img id="usernameIcon" src="assets/images/usern ...

Problem aligning ul within div element

I'm having trouble aligning my ul element in the center of a div. I tried using the margin: 0 auto method, but it's not working as expected. I've always wondered if setting the width of the ul within a div is necessary for using margin: 0 au ...

Incorporating dual CSS stylesheets into a single HTML document

I have been utilizing jsonform from https://github.com/joshfire/jsonform to create forms based on a json schema. However, jsonform requires its own css for the form, while I prefer to use a different css for my website's template. Is there a method t ...

Is it feasible to generate emojis using a gulp Icon-font task?

I'm in the process of creating a script that can generate fonts from SVG images, and so far it's been successful (using similar code to what's provided on https://www.npmjs.com/package/gulp-iconfont) Now I have a more specific question - is ...

Avoid replacing CSS properties, instead use jQuery to supplement them

Can anyone help me figure out how to use the jquery .css() function without overwriting existing values, but instead adding additional values to css properties? For example, I have an element that currently has the css transform:translate(-50%, -50%). I w ...

Validation is not being applied to the radio button

Link: Issue with Form I've encountered a problem with my script that is meant to validate and submit a form, similar to this working example: Form in Working Order Unfortunately, the script is not functioning as intended on the first link. The Java ...

Unexpected Issues with the Ant Design Sidebar Layout Demo

My React webapp is utilizing the Ant design component framework version 4. I attempted to integrate this example from the Antd documentation into my webapp: https://codesandbox.io/s/ymspt However, when I implemented the code in my webapp, the result didn ...

Automatically hiding divs when clicked using HTML and CSS

Apologies if this question has been asked before, but I have two onclick divs and I'm trying to achieve a specific behavior. When I open the first one, I want it to automatically close when I open the second one, and vice versa. Below is the HTML cod ...

Creating a unique layout with CSS: layered divs

I'm struggling with a stubborn layout issue that I just can't seem to figure out... - Left column - Fixed, Static (always in view) - Right column - Fluid/liquid/scrollable --- Header - fixed --- left/main fluid/liquid --- Right/sidebar - fixed ...

I'm struggling to make background-image display properly in my CSS code

In my quest to enhance the appearance of my website, I've been grappling with getting the background-image property to cooperate in CSS for the past three days. It's frustrating because I've successfully implemented this feature before, but ...

Align two divs to the left and the other one to the right

Here is the current structure of my code: <div style="height: 100px; Width: 200px;"> <!-- Container --> <div style="float: left; height: 50px; Width: 100px; background-color: ...

The entire image is unable to be shown within the div

When adding images to a carousel, I encountered an issue where only the top half of the image is displayed on the page. It seems that the image is not adjusting itself to fit the div container properly, resulting in only a portion of it being visible behin ...

The correct way to write media queries in CSS for the iPhone

After successfully formatting a website for various devices using an online responsive design tester and CSS declarations like @media only screen and (max-width: 480px), I encountered an issue during testing on an actual iPhone. The browser was not computi ...