Achieve a zoom effect for the background image using CSS3 transitions, which unfortunately does not function in

I have been experimenting with a "zoom" effect using a div structured like this:

<div class="highlight" style="background-image:url(image); background-position: 65% 50%;">
            <div class="content" style="margin-top: 150px">
                <h3>Blabla<br>Blablablablabla<br></h3>
                <p class="home5050">Blablablablabla.</p>
                <a class="btn btn-photo" href="urlsomething" style="color: black; background-color: white;">Blabla <span class="btnArrow">&gt;<span></span></span></a>
            </div>
        </div>

Here is the corresponding CSS code:

    .highlight {
  display: block;
  position: relative;
  /*min-height: 800px;*/
  min-height: 520px;
  background-position: center center;
  background-repeat: no-repeat;
  /*padding-top: 200px;*/
  padding-top: 80px;
  /*background-size: cover;*/
}

.highlight:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.25);
    content: "";
}

.highlight{
  position: relative;
  height: 800px;
  cursor: pointer;
  background-size: auto 110%;
  background-position: center center;
  -moz-transition: background-size 3s ease;
  -webkit-transition: background-size 3s ease;
  transition: background-size 3s ease;
}
.highlight:hover{
  background-size: auto 130%;
  background-color:rgba(0,0,0,0.4);
  -moz-transition: background-size 3s ease;
  -webkit-transition: background-size 3s ease;
  transition: background-size 3s ease;
}

.highlight:before{
  content: ' ';
  position: absolute;
  left: 0; top: 0;
  right: 0; bottom: 0;
  background-color:rgba(0,0,0,0.4);
  -moz-transition: background-color 3s ease;
  -webkit-transition: background-color 3s ease;
  transition: background-color 3s ease;
}

.highlight:hover:before{
 background-color:rgba(0,0,0,0.8);
 -moz-transition: background-color 3s ease;
 -webkit-transition: background-color 3s ease;
 transition: background-color 3s ease; 
}

There seems to be some conflicting CSS in the theme that may be causing issues, as it works in Firefox but not in Chrome at the moment.

Link to the code on JSFiddle

htmlcss

Answer №1

Ensure that you consolidate your background-size declarations to avoid redundancy and a lack of transitions. Consider combining your rules for .highlight and removing the unnecessary instance of background-size.

If you are unsure about the desired rules, here is a suggestion:

.highlight:hover {
    background-size: auto 130%;
    background-color: rgba(0,0,0,0.4);
    -moz-transition: background-size 3s ease;
    -webkit-transition: background-size 3s ease;
    transition: background-size 3s ease;
}
.highlight {
    display: block;
    position: relative;
    min-height: 520px;
    height: 800px;
    cursor: pointer;
    background-size: auto 110%;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 80px;
    -moz-transition: background-size 3s ease;
    -webkit-transition: background-size 3s ease;
    transition: background-size 3s ease;
}

https://jsfiddle.net/xav8t479/2/

To initiate the transition after a delay of 3 seconds, utilize the transition-delay property:

.highlight:hover {
    transition-delay: 3s;
    /* ... */
}

https://jsfiddle.net/xav8t479/3/

Answer №2

Check out this version which does not include animation keyframes:
Interested in this? It's fully functional on Chrome.

.highlight:hover {
  background-color: rgba(0,0,0,0.4);
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2 ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-size: auto 130%;
}
.highlight {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2 ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-image:url(http://www.eahealthsolutions.com/wp-content/uploads/2016/05/EA_Health_On_Call_Compensation_8916.jpg);
  position: relative;
  height: 800px;
  cursor: pointer;
  background-size: auto 110%;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  min-height: 520px;
  padding-top: 80px;
}
<div class="highlight">
  <div class="content" style="margin-top: 150px">
    <h3>New Content<br>Lorem Ipsum Lorem Ipsum<br></h3>
    <p class="section-info">More content here.</p>
    <a class="btn btn-photo" href="urlsomething" style="color: black; background-color: white;">Click Here <span class="btnArrow">&gt;<span></span></span></a>
  </div>
</div>

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

Issues arise when attempting to create smooth animations with 100% transform translate across different web browsers

After uncovering an ancient piece of JS code that I had once shared for free use, I discovered that a CSS animation bug from 3 years ago is still causing trouble today. The issue involves animating an element from left:100%/transform: translateX(100%) or ...

cssanimationtransformtranslate

Issues with the OnChange function not properly functioning in duplicate input fields

I've designed a form that allows for adding or deleting rows, effectively cloning input fields. One of the input fields utilizes Jquery Ajax to retrieve its value. However, upon adding an extra row by cloning the parent row to generate a child row, th ...

javascripthtmljqueryajax

Trouble getting Bootstrap to load in Rails with Sass

I'm a beginner in Rails and I'd like to incorporate Bootstrap into my website, but I'm running into issues with Bootstrap not loading. Can someone help me troubleshoot what might be wrong and suggest any changes I should make? I've bee ...

cssruby-on-railsrubytwitter-bootstrapsass

Incorporating a fixed header title when creating a customizable table

I am working on creating a dynamic table with rows and columns based on JSON data. JSON: $scope.dataToShow=[ tableHeder=["First Name","Age"], { name:"rahim", age:23 }, ...

javascripthtmlangularjs

Ensure the Bootstrap 4 row is placed at the bottom of the container with a height of 100%

Despite trying numerous approaches, I am still unable to achieve my desired outcome. The issue lies within a container with min-height: 100px; and height: 100%. Inside this container are two rows, as depicted in the image below. My goal is to have row 2 p ...

csstwitter-bootstrapbootstrap-4

Is it possible for me to utilize window.top within the .js file?

Within my GWT code, I am transferring a variable to a JSP file. The process looks like this: <html> <head> <script type="text/javascript"> alert("Inside the JSP file"); var criticalPath = window.top.criticalPath; ...

javascriptjqueryhtml

Using the number type in HTML input to set the initial value

One of my HTML inputs needs to indicate a year, like this: <input type="number" name="year" placeholder="Year" [max]="presentYear" min="1950"> This input is not mandatory, so ideally the default display should just be the placeholder "Year." Howeve ...

htmlangular

Execute jQuery script once as iframe starts loading

How can I ensure my jQuery animation script runs whenever an iframe is loading? Here is the code snippet I am working with: Code Snippet $(document).ready(function(){ //setup a counter to keep our place and cache a selection to the letter wrappers ...

javascriptjqueryhtmliframe

Create a basic grid layout using Bootstrap

I'm struggling to create this straightforward grid layout using Bootstrap: https://i.sstatic.net/fnQRt.png Essentially, I attempted the following method based on Bootstrap documentation: <td> <div class="row"> <div class=&q ...

htmlcssbootstrap-4

Find the tiniest even number out of two given inputs, ensuring that the number is even. Any ideas on how to achieve this using JavaScript or HTML?

the code is always incorrectly identifying num1 as the smaller number, even when that's not the case. Additionally, if the second input is odd and the first is even, the output should indicate this. It would also be helpful to have an output stating " ...

javascripthtml

Presenting the correct error notification if the JSON data fails to load in an HTML webpage

Here is a sample JSON data: [ { "componentid": 4, "displayImageUrl": "https://via.placeholder.com/350x200", "title": "theme", "shortdesc": "to set theme for different applications" }, { "componentid": ...

javascripthtmljson

CSS Element Overlapping Issue in Safari Browser

I am currently developing an audio player for my application that includes a pause/play button, next button, and back button. I have encountered a problem specifically on Safari where the back/pause buttons are overlapping each other. The play/pause button ...

javascripthtmlcssnext.js

Modify the css based on the user's input

<html lang="en"> <head> <link rel="stylesheet" href="style.css" /> <li id="visa"> <section class="credit-card visa gr-visa"> <div class="logo">visa</div> <form> <h2>Payment ...

javascriptjquerycss

How to align an image in the center of a circular flex container

I'm facing an issue in my Angular project where I have the following code snippet: onChange(event: any) { var reader = new FileReader(); reader.onload = (event: any) => { this.url = event.target.result; }; reader.readAsData ...

javascripthtmlcssangulartypescript

When the mouse hovers over, the flash content in Firefox 7 will automatically reload

This is the structure I currently have: <div class="feed-item" style="position:relative;" id="feed-611" onmouseover="showDelete()" onmouseout="hideDelete()"> <div class="feed-avatar"> AVATAR </div> <div class="feed-content"> ...

htmlfirefoxbrowseronmouseover

Unable to input text into a Textbox using Selenium's WebDriver

My current task involves using Selenium WebDriver along with Java to input text into 2 different textboxes. Despite successfully entering text in the first textbox, I am encountering an ElementNotVisibleException when trying to interact with the second tex ...

javahtmlangularjsseleniumselenium-webdriver

Utilize Chrome Extension to Add or Remove HTML Elements

In the process of developing a Chrome extension, I encountered a specific web page where there is a table with commented out information. I am seeking a way to eliminate the comment syntax in order to display the hidden information within the table. What ...

htmlgoogle-chromeinjectcrx

Shifting the entire page from left to right and back again

I am in search for a template that moves the page from left to right. If anyone can guide me on how to create this effect or provide a JavaScript example, I would greatly appreciate it. ...

javascriptjqueryhtml

Is there a specific method for sending checkbox values to a php script through AJAX?

How can I utilize the code snippet below to send the values of each checkbox to a PHP page, where they will be either inserted into a new row or update an existing column in MySQL? <script language="javascript" type="text/javascript">// <![CDAT ...

phpjqueryhtmlcss

The jQuery fadeTo animation doesn't function properly on Internet Explorer 8

I'm experiencing an issue where the desired effect is working in Firefox but not in Internet Explorer 8. Here is the webpage: Please check the top 3 links in the header (right side) that should have spotlights fading in and out when hovering over th ...

jqueryhtmlcss