Issue with opacity transition functionality not functioning as expected

I'm a newcomer to the world of CSS and HTML with a quick question. I'm attempting to create an opacity transition effect for the description of an image when the mouse hovers over it. However, I'm having trouble getting it to work and I can't figure out why.

Here is my code: http://jsfiddle.net/3VHvM/

This is my HTML code:

<div class="bucket">
<img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" alt=""/> 
<div class = "img-overlay">
    <h3>Typography</h3></div>
</div>

And here is my CSS code:

.bucket {
width: 31%;
float: left;
position: relative;
margin-top: 1%;
margin-right: 1%;
margin-bottom: 1%;
margin-left: 1%;
text-shadow: 0px 0px 0px;
-webkit-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
background-color: rgba(0,0,0,1.00);
overflow: hidden;
}

.img-overlay {
background-color: rgba(0,0,0,1.00);
bottom: 0px;
color: #FFFFFF;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.05s;
-webkit-transition: opacity 0.05s;
-moz-transition: opacity 0.05s;
}

.bucket:hover .img-overlay {
opacity:0.75;
filter: alpha(opacity=75);
}

.bucket img {
width: 100%;
}

Thank you in advance for your assistance!

htmlcss

Answer №1

It is impossible to perceive the impact in just 1/20th of a second. Consider using 2s instead for better visibility.

Answer №2

Click here to view the code snippet

.img-overlay {
    background-color: rgba(0,0,0,1.00);
    bottom: 0px;
    color: #FFFFFF;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    width: 100%;
    z-index: 1000;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -moz-transition: opacity 2s;
}

Answer №3

It is in motion - moving at a pace too rapid for the naked eye to capture, consider reducing the transition speed to 1s. This will determine how long the animation lasts; 0.05s is excessively swift.

transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;

Answer №4

Great job on your code! You've got it right, just adjust the time to 0.5 seconds and you'll see the output.

Answer №5

If the transition is faster than 0.5 seconds, most people may not even notice it. Quentin suggests that a duration of 0.2 seconds is the quickest at which the transition becomes perceptible if you are actively seeking it out. However, for viewers to truly focus on the transition, it is recommended to make it even slower.

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

The Bootsrap 5.3 navbar is not fully extending to the width of the page

My goal is to have the list items in a Bootstrap navbar stretch across the width of the page in mobile view, but I'm having trouble achieving this. I've tried following various tutorials without success. I even attempted using *{margin:0;padding ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

jQuery is used to make an object fade out once another object has been moved into place

As I delve into the world of jQuery, I've decided to create a simple Super Mario imitation. The concept is to control Mario using arrow keys and fade out mushrooms once Mario reaches them. However, my attempts at achieving this result have not been su ...

javascriptjqueryhtmlcssonkeydown

How can I smoothly animate a DIV over a background in both directions?

Unfortunately, the full example I wanted to share is no longer available online. Let me try my best to describe it instead. The idea is to have a continuous looping video as the full-screen background. On top of that, there will be a DIV containing anothe ...

javascriptjquerycssanimationjquery-animate

Creating an SVG design with a circular gradient fill: A step-by-step guide

I have been attempting to create svg shapes with a circular gradient fill. However, when using <radialGradient>, it results in an elliptical gradient fill rather than the desired circular gradients, as demonstrated in this fiddle. What I am aiming f ...

htmlcsssvg

Unable to highlight text within a div container

I am currently facing an issue with my layout that involves three columns stacked to the left and four inner columns with three floated left and one floated right. This configuration is causing a problem where I cannot select any text on the page. Removing ...

htmlcsscss-float

Is there a way to adjust the placement of the .container element?

I am currently working on building a website for educational purposes. My goal is to have a "Follow us" h2 heading with YouTube and Twitter icons positioned on the right side of the page. If the webpage size reduces or if accessed on a mobile device, I wa ...

htmlcss

Ensure that the floating div is positioned along the right side and adjusts to accommodate the

I've been searching for a solution to this issue, but it seems like I might not be articulating it correctly because I haven't been able to find an answer yet. On my page, there is a 'quick links' button that is supposed to stay fixed ...

htmlcss

The variablewidth feature in Slick Carousel is malfunctioning

I've integrated slick slider 1.8.1 into my Rails app (v.5.2.0) and I'm encountering an issue with variablewidth set to true. My expectation was to achieve a layout similar to the example shown here: https://i.sstatic.net/5QFRx.jpg However, what ...

jqueryhtmlcssslick.js

Accepting user input in a PHP for loop

Almost there, but I'm having trouble with a loop in my PHP code. The issue is that the code doesn't wait for user input and continues on. I've included my code below. The Excel spreadsheet starts at row 4 with multiple choices. Once a choice ...

javascriptphphtmlarraysexcel

Issue encountered with fetching multiple data from database using checkboxes and a submit button

I am facing an issue with my shop page. I have the categories listed in checkboxes, and below that, I want to display only the checked categories after pressing the submit button. However, I'm not getting any feedback upon submission. When I replace ...

phphtmlmysql

Using jQuery, set a restriction on the total number of options in three dropdown menus to

I am currently facing a challenge with 3 dropdowns, each containing 8 options. My aim is to restrict the total selection across all three dropdowns to 8. For instance, if I choose 7 in the first dropdown, I should only be able to pick 1 in the next two. Si ...

javascriptjqueryhtml

Looking to position the div element at the center of the page using CSS styling

I have a webpage with four arrows positioned at the top left corner of the screen - pointing in different directions. I would like to align them in the center of the page so that they fit seamlessly into the layout without any scrolling required. Can anyon ...

htmlcss

Using Vue.js to dynamically populate all dropdown menus with a v-for loop

Getting started with vue.js, I have a task where I need to loop through user data and display it in bootstrap cols. The number of cols grows based on the number of registered users. Each col contains user data along with a select element. These select ele ...

javascripthtmlvue.js

What is the best way to disable the appearance of an HTML checkbox?

Is there a way to make a checkbox readonly, but still have it appear disabled or grayed out? I want it to function like this: <input type="checkbox" onclick="return false;"> If anyone knows how to accomplish this, please share yo ...

javascriptjquerycss

What is the best way to extract data from dynamically generated radio buttons?

UPDATE I previously attempted the recommended adjustments in the initial response, but encountered issues with radio buttons allowing multiple selections and the label number controlling the top radio button. Subsequently, I have experimented further...I w ...

htmljqueryasp.net-corerazor-pages

CSS - Desiring a border with three layers

Here is the CSS code I am using: border: 2px solid #00ff60; outline: 1px solid #000; outline-offset: 0px; This is how it looks: https://i.sstatic.net/SuvU1.png Is there a way to modify it so that it includes an inner black border, similar to the one at ...

css

Troubleshooting why Swift Mailer is failing to send emails

Trying to send an email with an attachment using Swift Mailer, but the email is not being sent. As a PHP beginner, I am struggling to identify and fix the issue. Here is the code snippet: <?php require_once 'swift/lib/swift_required.php'; $ ...

phphtmlemailswiftmailer

Determining the screen width of mobile devices across the board

While using the Google Chrome inspector to simulate the Galaxy S5 (360px) screen, I am encountering issues with detecting the correct screen width. The CSS for 360px is being overridden by the 768px CSS instead. Is there a more effective solution to this ...

htmlcss

Loading Ajax dropdown with a preselected value in the dropdown menu

There are two pages, each containing a form. Page 1 - Form A) Includes a dropdown menu (with values populated from the database) and a continue button. <select name="form[formA][]" id="dropdown1"> <option value="1">Option 01</opti ...

javascriptphpjqueryhtmlajax

The fascinating CSS Circle interaction on mouse click or hover

I am encountering a challenge with my circular element: Here is the HTML code for it: <div id="quadrant-sizer"></div> And here is the CSS styling: #quadrant-sizer { width: 40px; height: 40px; border-radius: 999px; } The issue I ...

css