Unsuccessful attempt at a basic CSS transition - no success

I'm currently trying to create an image with a gradient that disappears on hover, but I'm struggling to get the transition effect to work. I've experimented with various webkit transitions without success.

Here's the HTML:

<a href="http://calvarygigharbor.com/heavenly-hitters/">
<div class="tinted-image"> </div></a>

And here's the CSS I'm using: 

.tinted-image {
 -webkit-transition: all .7s ease;
transition: all .7s ease;
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
border-radius: 10px;

background:  
linear-gradient(
  rgba(255, 0, 0, 0.6), 
  rgba(237,240,0,0.6)
),
/* image */
url(http://calvarygigharbor.com/wp-content/uploads/2018/05/church-softball-2018.jpg);
background-size: contain;
}

.tinted-image:hover {
 -webkit-transition: all .7s ease;
transition: all .7s ease;
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
border-radius: 10px;
background: 

/* image */
url(http://calvarygigharbor.com/wp-content/uploads/2018/05/church-softball-2018.jpg);
background-size: contain;
}

Despite the picture and hover functioning correctly, the transition is not working as intended. Any tips on how to fix this?

URL:

htmlcsshovercss-transitions

Answer №1

To achieve a transition effect on a gradient, you can consider adding the transition to the background-size property instead. By adjusting the values of background-size and background-position, you can control how the transition behaves:

.tinted-image {
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  border-radius: 10px;
  background: linear-gradient( rgba(255, 0, 0, 0.6), rgba(237, 240, 0, 0.6)),
  /* image */
  url(http://calvarygigharbor.com/wp-content/uploads/2018/05/church-softball-2018.jpg);
  background-size:100% 100%, contain;
  background-position:center,center; /*OR [left,center] OR [top,center] ...*/ 
  background-repeat:no-repeat;
}

.tinted-image:hover {
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  border-radius: 10px;
  background-size:0 0,contain; /* OR [100% 0,contain] OR [0 100%,contain] */
}
<a href="http://calvarygigharbor.com/heavenly-hitters/">
  <div class="tinted-image"> </div>
</a>

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 reason for the 'scrollHeight' being considered 'undefined' in this particular scenario, and why did the iframe encounter an error when switching to the html-file?

This is my first time asking a question, so please forgive any mistakes... I am attempting to create a website using HTML, CSS, and JavaScript on my Raspberry Pi with Apache2. I have written a script for an automatic iframe height function based on the co ...

javascripthtmliframeheight

Showing text in a textarea while maintaining formatting (such as using <br>)

Can someone help me with formatting a block of text like this: hello <br> how is your day <br> 123 To look like this: hello how is your day 123 I also need to display it in a textarea field. I attempted to do so using the following code: $ ...

javascripthtmljquery

The Iframe is preventing the mousemove event from taking place

After attaching an event to the body, a transparent iframe mysteriously appeared in the background of the popup. I am attempting to trigger a mousemove event on the body in order for the popup to disappear immediately when the mouse moves over the iframe ...

javascripthtmlcss

Display and conceal elements within predetermined time intervals using jQuery, while ensuring that the final element remains visible

Is there a way to automatically hide div1 and show div2 after a set amount of time, let's say 10 seconds or 15 seconds? I came across this thread: Show and hide divs at a specific time interval using jQuery, However, the solution provided in the po ...

javascriptjqueryhtml

Achieving equal height for the inner div in Flexbox to match the height of its parent

I am currently using flexbox to structure a web application. While it is functioning as expected for most parts, I am encountering an issue with the main content area. The "router-view" element has the desired full height, but the nested div inside of it d ...

htmlcssflexbox

Can you modify the color of the dots within the letters "i"?

Is there a method to generate text like the one shown in the image using only css/html (or any other technique)? The dots in any "i's" should have a distinct color. Ideally, I'd like this to be inserted via a Wordpress WYSIWYG editor (since the ...

jqueryhtmlcss

How do you go about indenting a paragraph in CSS following the insertion of

My objective: To have all paragraphs indented except for the ones following the .firstCharacter class. In some sections of my page, I utilize a drop cap to start off the first paragraph. I have configured all subsequent paragraph tags to be indented using ...

css

The material UI styled component is not appearing as expected

I'm having trouble getting the MUI styled() utility to apply styles to <MyComponent>Styled div</MyComponent> in my index.jsx file. Any ideas why? import Button from '@mui/material/Button' import Grid from '@mui/mater ...

htmlreactjsmaterial-uinext.js

The button fails to function properly after loading a partial view using AJAX

Having an issue with my page that contains two buttons - Next and Previous. These buttons are supposed to load a table in a PartialView. The problem arises when I press the button for the second time, it doesn't work as expected. Below is the code sn ...

htmlajaxasp.net-mvcasp.net-mvc-4partial-views

Ensure that all content in the table rows remains visible, even in a table with unusually lengthy cells

My HTML table is structured like this: +-------------+-------------+----------+ | Single line | Single line | Very, | | | | very | | | | long | | | | text, | | ...

javascriptjqueryhtmlcss

Solution to trigger CSS :hover to refresh following a transition (such as expanding a menu)

While there are existing discussions on this topic, I am presenting my query for two specific reasons: It introduces a potential alternative solution The demo code could be helpful to individuals looking to emulate a menu Following a CSS transition, the ...

javascripthtmlcssevents

What is the best way to link the value of a mat-slider to an input field in a reactive form?

Is there a way to synchronize the min and max values of a ranged mat-slider with corresponding input fields? Currently, when I set numbers in the input fields, the slider updates correctly. However, when I use the slider to change the value of the input fi ...

javascripthtmlangulartypescriptangular-material

Submit form data asynchronously using Ajax and serialize the form data before posting

I'm currently facing an issue with posting HTML form values in my code. Everything works fine except for the fact that I can't get it to post single quotes ' . I believe this problem is caused by the usage of serialize. I've attempted c ...

javascriptjqueryhtmlajax

Discovering the initial element with a data attribute above zero using JQuery

I am working with a set of divs that have the class .item-wrap. At the moment, I am able to select the first div using this code snippet: $(".item-wrap:first").trigger( "click" ); Each .item-wrap element comes with a data-amount attribute. My challenge ...

javascriptjqueryhtml

Exploring the Features of PrimeNG Table Component in Angular 8

After attempting to implement p-table (PrimeNG table) in my Angular project and importing all necessary dependencies and modules using the CLI, I encountered the following error: ERROR: The target entry-point "primeng/table" has missing dependencies: - @ ...

htmlangulartypescriptangular-materialprimeng

Incorporate a personalized style into the wysihtml5 text editor

Is there a way for me to insert a button that applies a custom class of my choice? I haven't been able to find this feature in the documentation, even though it's a commonly requested one. Here's an example of what I'm looking for: If ...

javascripthtmlwysiwygwysihtml5

Is there a way to iterate through identical sections of HTML using BeautifulSoup?

Looking to extract information from each of the "item watching" elements within the "items" class. Currently facing a challenge where using the find method only retrieves HTML for the first occurrence of "item watching". Aiming to avoid utilizing find_all ...

pythonhtmlbeautifulsoup

Unable to alter the css of a jQuery object

I have been attempting to modify the CSS of two child elements of a specific element using Backbone and jQuery. However, my code does not seem to be working as expected. I suspect that the issue lies in distinguishing between a DOM element and a jQuery obj ...

javascriptjquerycssbackbone.js

conceal the mustard-colored dots within the overlay

Whenever I trigger the link, a modal window pops up, but it comes with an unwanted black background color and yellow dots. How can I prevent the yellow dots from showing up on the overlay? http://jsfiddle.net/y88WX/18/embedded/result/ <nav class="da-d ...

javascriptjqueryhtmlcss

The Wonders of Flex Box and Media Queries

Can a website still be made responsive without relying on media queries when flexbox is already implemented? Are there specific scenarios where the utilization of media queries offers enhanced control? ...

htmlcssflexboxmedia-queries