How can I zoom an image that is inside an div on hover using CSS (zoom only the image, not the div).
See what I'm talking about here
Some minor modifications of #tim-klein answer to get effect from video
.container {
border: 1px solid black;
width: 100%;
height: 184px;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
transition: all 2s ease-in-out;
}
.container:hover img {
transform: scale(2,2)
}
<div class="container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</div>
You can accomplish the general idea by using the :hover pseudo-class. Note: I didn't go overboard with keeping the img centered or using a transition to mimic the slow zoom, however, you could easily add those features if desired.
.container {
border: 1px solid black;
width: 100%;
height: 184px;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
}
.container:hover img {
width: 120%;
height: 120%;
}
<div class="container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</div>
Couple of different ways to tackle this.
Demo: https://codepen.io/shanomurphy/pen/BvMrWq?editors=1100
1. Using background-image
HTML:
<div class="zoom-bg"></div>
CSS:
.zoom-bg {
width: 300px;
height: 200px;
overflow: hidden;
}
.zoom-bg:before {
content: '';
display: block;
width: 100%;
height: 100%;
background: url('https://placeimg.com/300/200/nature') no-repeat center;
background-size: cover;
transition: all .3s ease-in-out;
}
.zoom-bg:hover:before {
transform: scale(1.2);
}
2. Using nested image and object-fit
Basically the same as #Alx Lark's answer but adding object-fit to maintain the aspect ratio of the image.
HTML:
<div class="zoom-img">
<img src="https://placeimg.com/300/200/arch">
</div>
CSS:
.zoom-img {
width: 300px;
height: 200px;
overflow: hidden;
}
.zoom-img > img {
object-fit: cover;
width: 100%;
height: 100%;
transition: all .3s ease-in-out;
}
.zoom-img:hover > img {
transform: scale(1.2);
}
Related
I've been struggling to hover to work. All this should do is have a red container div and when you hover it, a black inner div drops down from the top to block the container. I must be doing something basic wrong here.
HTML:
<div class="container">
<div class="inner" />
</div>
CSS:
.container {
position: relative;
width: 200px;
height: 200px;
background: red;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 0;
background: black;
transition: max-height 2s ease-out;
overflow: hidden;
}
.container:hover .inner {
max-height: 200px;
}
As mentioned by Temani Afif, this was nothing more than missing a height.
working on SCSS transition I made two classes trigger and box and while hovering on trigger box should start moving and rotating.
.trigger {
display: inline-block;
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
background-color: #ddd;
outline: 20px solid #999;
position: relative;
margin: 25% 25%;
&:hover {
.box {
transform: translate(200px, 150px) rotate(20deg);
}
}
}
.box {
display: inline-block;
background-color: pink;
width: 100px;
height: 100px;
transition: transform 1000ms ease-in-out;
}
the effect works fine on chrome
[1]: https://i.stack.imgur.com/E2CnC.png
however Firefox scales the trigger borders
[2]: https://i.stack.imgur.com/6OVW4.png
the jade code
.trigger
.box
I added position: relative to .trigger and position: absolute to the box. I didn't have your html so I took a guess at what it might look like. this solution seems to work at least in codepen (I viewed in Chrome and Firefox and both are working). I had to modify your scss to css in this example in order to tinker with it in codepen and post here.
.trigger {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
background-color: #ddd;
outline: 20px solid #999;
position: relative;
margin: 5% 25%;
}
.trigger:hover .box {
transform: translate(200px, 150px) rotate(20deg);
}
.box {
position: absolute;
display: inline-block;
background-color: pink;
width: 100px;
height: 100px;
transition: transform 1000ms ease-in-out;
}
<div class="trigger">
<div class="box"></div>
</div>
I want to toggle this div to expand and collapse on click. The transition for the expand works, however I cannot figure out how to transition the collapse. I would like to use max-height in order to have dynamic (large or small) content inside of my div.
div.component.html
<div
[ngClass]="{'expand': divClass, 'collapse': !divClass}"
(click)="divClass = !divClass"
class="a">
</div>
div.component.css
.a {
width: 400px;
height: 100px;
max-height: 100px;
transition: max-height 1s;
}
.expand {
background-color: red;
height: 500px;
max-height: 500px;
}
.collapse {
background-color: red;
max-height: 100px;
height: 100px;
transition: max-height 1s;
}
I just changed the transition to transition-duration..just css stuff
div.component.css
.a {
width: 400px;
height: 100px;
max-height: 100px;
transition-duration: 1s;
}
.expand {
background-color: red;
height: 500px;
max-height: 500px;
}
.collapse {
background-color: red;
max-height: 100px;
height: 100px;
transition-duration: 1s;
}
And here is the Demo and the StackBlitz I forked showing it working
I have an animation with an iframe which is reduced and let appear my .project container but it looks like my red background for this class is not computed when I use Firefox or Chrome.
Codepen: http://codepen.io/kejoff/pen/bqmQXQ
HTML
<body>
Click to resize
<div class="container">
<div class="project">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d338195.2873427642!2d2.2500731!3d48.530343949999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sfr!4v1490778528424" frameborder="0" style="border:0" allowfullscreen class="map"></iframe>
</div>
</div>
</body>
CSS
* {
padding: 0;
margin: 0;
}
.button {
padding: 10px;
margin: 2rem auto;
width: 6%;
background-color: #FFC72C;
display: block;
text-decoration: none;
color: #071D49;
}
.button:hover {
background-color: #071D49;
color: #FFC72C;
}
.container {
width: 1400px;
height: 90vh;
margin: 0 auto;
background-color: blue;
}
.project {
background: red;
width: 100%;
height: 100vh;
}
.map {
width: 100%;
height: 90vh;
display: block;
transition: all 1s linear;
}
.mapAnimationIn {
animation: resize-gmap 5s;
animation-fill-mode: forwards;
display: block;
}
/* Keyframe resize Gmap */
#keyframes resize-gmap {
from {
height: 90vh;
width: 100%;
}
to {
height: 18vh;
width: 10vw;
transform: translate(0, 72vh);
}
}
your .container class is getting applied. The problem is that your .project class container completely covers the parent container i.e. .container. Add padding to .container class or reduce width of .map class to below 100%, to see it work. You can do it like so -
.container {
width: 1400px;
margin: 0 auto;
background-color: blue;
padding: 20px;
}
.project {
background: red;
width: 100%;
}
.map {
width: 90%;
}
Also its generally a bad idea to hard code height. To make your page responsive, prefer dynamic width i.e. in % for example rather than in pixels.
Hope it helps
I checked it in Chrome and Firefox and in both browsers when I hover over the image, the transition seems to forget that the object-fit rule is applied.
Is this a bug or is there something wrong?
EDIT: I found it looks good if I put the img inside a div and animate that div. But I wouldn't like to modify my html for css reasons.
* {
padding: 0;
margin: 0;
}
figure {
width: 400px;
height: 150px;
overflow: hidden;
}
figcaption {
position: absolute;
z-index: 1;
color: white;
font-family: Arial;
top: 10px;
left: 10px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transition: transform 0.5s ease;
}
img:hover {
transform: scale(1.2);
}
<figure>
<figcaption>Title</figcaption>
<img src="http://www.fondox.net/wallpapers/un-gato-bebe-433.jpg" alt="" />
</figure>
You have to set height as auto:
* {
padding: 0;
margin: 0;
}
figure {
width: 400px;
height: 150px;
overflow: hidden;
}
figcaption {
position: absolute;
z-index: 1;
color: white;
font-family: Arial;
top: 10px;
left: 10px;
}
img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center center;
transition: transform 0.5s ease;
}
img:hover {
transform: scale(1.2);
}
<figure>
<figcaption>Title</figcaption>
<img src="http://www.fondox.net/wallpapers/un-gato-bebe-433.jpg" alt="" />
</figure>