CSS animation for dynamic zoom in and out effect inspired by Apple's slideshow feature

I really love the smooth auto zoom in and out effect on this website: , especially for the banner images at the top. I tried to recreate it by inspecting the developer tools in my browser, but I'm having trouble implementing it as some properties are crossed out in the developer tool.

Here is my HTML:

 <div class="row">  
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <a href="#">
             <article class="article_container">
                 <img class="article_image_hompage5" src="#">       
                 <h2 class="article_title_hompage3">My favorite Thai soup</h2>     
             </article>
         </a>
     </div>
 </div>

And here is my CSS for the image:

.article_image_hompage5{
    width: 100%;
    border-radius: 2px 2px 2px 2px;
    position:relative;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:15px;
    z-index:0;
}

Could someone help me find the correct CSS settings? Thanks!

htmlcss

Answer №1

For a similar effect, consider using CSS animation.

/* Create zoom animation */
@-webkit-keyframes zoom {
    from {
    -webkit-transform: scale(1,1);
    }
    to {
    -webkit-transform: scale(1.5,1.5);
    }
}

@keyframes zoom {
   from {
        transform: scale(1,1);
   }
   to {
        transform: scale(1.5,1.5);
   }
}


img {
    -webkit-animation: zoom 50s; /* Apply zoom animation */
    animation: zoom 50s;
}
<img alt="" src="http://watchingtheworldcup.com/photos/worldcup1.jpg" />

Answer №2

To achieve a zoom out effect as well, make sure to specify the milestones in your keyframes like this:

@-moz-keyframes zoomoutin {
    0% {
        -moz-transform: scale(1,1);
    }
    50% {
        -moz-transform: scale(0.5,0.5);
    }
    100% {
        -moz-transform: scale(0.9,0.9);
    }
}

Answer №3

Try using the css transform:scale(); property.

For example:

Here is a sample JavaScript code snippet:

window.onload=function(){
$("#content").fadeOut(4000);
    $("#background").addClass("zoom");
    setTimeout(function(){
    $("#background").removeClass("zoom");
    },5000);
}
body{
  margin:0px;
  padding:0px;
    width:100%;
    height:100%;
  }
#background{
    position:absolute;
    top:0px;
    left:0px;
width:100%;
height:100%;
background:url("http://watchingtheworldcup.com/photos/worldcup1.jpg") center center no-repeat;
background-size: 100% 100%;
display:inline-block;
    z-index:2;
    transition:all ease 4.1s;
   /* transform:scale(1,1);*/ 
}
#content{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:3;
    background-color:rgba(0,0,0,0.5);
    color:#ffffff;
    font-size:50px;
}
.zoom{
    transform:scale(1.2,1.2);
}

HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="background">    
</div>
<div id="content">
    <center><br /><br /><br /><br /><br /><br />
        Watching...
    </center>
</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

I desire to share the JSON information and receive the corresponding response data

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> ...

javascriptjqueryhtmlajaxrest

React-Native-Web generates default classes for inline styles and erroneously applies them in a jumbled sequence

Currently working on a project involving react native web and NextJS. I have encountered an issue with inline styles in React that seems to be caused by RN-Web. It appears that there is a mechanism within the framework that automatically generates classes ...

cssreact-nativenext.jsreact-native-web

"Utilize Bootstrap 4 to align text in the center and expand the text area for a

Currently experiencing some challenges with Bootstrap 4: Need to center the inline input fields Insert space between the inputs Add a large textarea below the input fields This is the current layout: Here is the HTML code: body { background: url(h ...

htmlcsswebbootstrap-4

Submitting two arrays via form

Having trouble getting a form to submit. The form should allow the user to select a task, then display several rows with checkboxes and dropdown selects with values ranging from 1-10. If a checkbox is selected, the values from the corresponding select sh ...

phphtml

The repetition of the react nodejs page load occurs when the get method is utilized

I've successfully set up a page and function for loading the customer list. However, I'm facing an issue where adding the get method to my code results in it being called every time information is received from the URL and the page is rendered. i ...

javascripthtmlnode.jsreactjshttp-post

Achieve full width for container using flexbox styling

In an attempt to develop a category dropdown menu with multiple columns based on the length of the <ul>, I am facing some challenges. For reference, you can view the fiddle that I have created here. The goal is to arrange each submenu item below th ...

htmlcssflexbox

Why is the "text-overflow: ellipsis" property of a parent div not functioning properly for its child div?

Why is the CSS property text-overflow: ellipsis not working on a child div with the class name cluster-name? .ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; text-overflow: ellipsis; overflow: hidden; } .ft-column > .cluster-name { ...

htmlcss

Utilizing jQuery to establish various AJAX requests through functions on page load and button click

Utilizing a basic ajax call both on page load and click events, where I have defined separate functions for each. Despite using different URLs and parameters in the function, the JSON data from the previous call is still being displayed when clicked. Bel ...

javascriptjqueryhtmlajax

One Background Image Serving Multiple Divs

Can you use one image (PNG or SVG) as the background for multiple divs? Take a look at the images below to see how it could work. And if the screen width gets smaller and the divs stack up vertically, is there a way to change the background accordingly? D ...

javascripthtmlcsssvgpng

Adjust the borderBottomColor of Material-UI TextField upon completion of input

When working with MUI to create a form, I noticed that the default TextField bottom border is grey, turns blue when focused, and then back to grey when focus is lost. My goal is to prevent it from losing the blue color after filling in the field: https:// ...

cssreactjsmaterial-uimaterial-design

Cross-origin resource sharing policy preventing ajax request

Seeking help with my simple code for making an ajax request. Initially tried using a .txt file and encountered a CORS error. Switched to using a php file with header("Access-Control-Allow-Origin: *") but still facing issues. Searched through numerous SO po ...

phphtmlajaxcors

Issue with the Dropdown menu in Metro UI CSS - not functioning properly

I have integrated the METRO UI CSS into my project and created a dropdown menu. The design looks great, but unfortunately, the dropdown list is not appearing as expected. To implement this feature, I followed the example provided on the following link: H ...

jqueryhtmlcsswindows-8metro-ui-css

Two sections that are supposed to have the same height, but one seems to be slightly taller than the other

Upon closer inspection: At first glance, they may appear identical at certain zoom levels. However, a more detailed examination through zooming in and out reveals a noticeable discrepancy. Firefox's default zoom may make them seem incorrect, while Chr ...

csshtmllayoutheight

How can I create responsive buttons with icons using material-ui?

I'm working with a material-ui Button that has a startIcon, and I need to hide the button text on smaller screens while still showing the icon. One common solution would be to use the useMediaQuery hook to identify the browser size and render a diffe ...

cssreactjsmaterial-ui

How to remove an extra horizontal scroll bar from a fixed-header HTML table?

While working on updating my HTML tables to have fixed headers, I followed online examples that suggest making table-layout fixed, thead and tbody blocks, setting height constraints for tbody, and applying overflow-y to tbody. The result is functional as m ...

htmlcss

Introducing a fresh input field that includes a dropdown selection feature

When a user clicks on the "+" button, a new row should be added with a dropdown and input field. I want the input field name to be the dropdown value for each row. If "Facebook" is selected in the first dropdown, it should not appear in the second dropdo ...

javascriptphpjqueryhtmlcss

I am interested in creating a design where two DIVs are layered on top of each other with one having transparency, allowing visibility through to the background DIV. This can be achieved using a combination of

Looking to enhance the visual appeal of my website, I decided to incorporate a background image within a div. To add more depth and creativity, I am now striving to overlay a semi-transparent black box on top of the image. This overlay will not only allo ...

htmlcss

Which browser accurately parses the CSS Box Model: Firefox, Internet Explorer, or Chrome?

Padding behaves differently in Firefox and IE. IE adds padding to the height and width, while Firefox ignores it. What is the correct interpretation of this behavior, and how can we achieve a consistent look across all browsers? Are there differences in ...

htmlinternet-explorerfirefoxcss

The :before and :after pseudo classes are not displaying properly on the video element

I'm trying to display a title over a video element while it's playing, but I've run into an issue. When using the <video> tag, it doesn't work as expected, however, when I switch it to a <div>, everything works perfectly fin ...

htmlcssvideo

Angular routing does not properly update to the child's path

I've organized my project's file structure as follows: app/ (contains all automatically built files) app-routing.module.ts components/ layout/ top/ side/ banner/ pages/ ...

javascripthtmlangular