Css Zoom Out Image Without Hover Code Example


Example 1: zoom image css


/*Zoom on hover*/

<style>
.zoom
{
padding: 50px;
background-color: green;
transition: transform .2s; /* Animation */
width: 200px;
height: 200px;
margin: 0 auto;
}

.zoom:hover {
transform: scale(1.5); /* (150% zoom)*/
}
</style>

<div class="zoom"></div>

/*credits: w3schools.com */

Example 2: how to use image zoom effect in css


.parent {
width: 400px;
height: 300px;
}

.child {
width: 100%;
height: 100%;
background-color: black; /* fallback color */
background-image: url("images/city.jpg");
background-position: center;
background-size: cover;
}

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable