Hoping to get some input. I've been taking some online courses on web development and I've been currently playing around adding images to an html page (3x3 image grid).
First I used the transform property so I could scale the image with a .5s transition to 1.5 times the size after hovering over it with a .5 second delay.
There is an issue with the images on the left and right sides as part of them go out of the screen after scaling.
To correct this I first tried position: relative; left: 6%; but learned that position is not a property you can animate, so the image immediately moves position and then scales after .5 seconds.
My second try was with object-position: 90px; , this property does work with the delay but after it scales it seems like a big chunk of the image is cropped.
I've been trying different properties like transform-origin which kind of works but gives it a glitchy feeling as it scales and then finishes moving the image to the side losing fluidity.
Can't seem to find helpful documentation on object-position as to why part of the image crops, this property gives a fluid scaling and positioning effect but I have that cropping issue.
Here is a link to a codepen where I have this exercise:
https://codepen.io/superavd88/pen/PoqYoRJ
Any ideas would be really appreciated as I've been trying to fix this issue for the last couple of days without success.
Thanks in advance.
Welcome to SO!
You just need to wrap you images indie div and make it overflow
hidden and also i changed the grid, using flex now
.thumbnail img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
width:100%;
}
.thumbnail .img-parent:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.img-parent{
overflow:hidden;
width: 33%;
}
img{
width: 100%}
.thumbnail {
display: flex;
flex-wrap: wrap;
}
<div class="thumbnail">
<div class="img-parent">
<img src="https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/HB4AT3D3IMI6TMPTWIZ74WAR54.jpg&w=767" alt="deep house cleaning">
</div>
<div class="img-parent">
<img src="https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/HB4AT3D3IMI6TMPTWIZ74WAR54.jpg&w=767" alt="deep house cleaning">
</div>
<div class="img-parent">
<img src="https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/HB4AT3D3IMI6TMPTWIZ74WAR54.jpg&w=767" alt="deep house cleaning">
</div>
<div class="img-parent">
<img src="https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/HB4AT3D3IMI6TMPTWIZ74WAR54.jpg&w=767" alt="deep house cleaning">
</div>
</div>
Reference for how scale property work
change CSS styles
img {
width: 30%;
float: initial;
margin: 1rem;
transition: all .5s ease-in-out;
}
.leftimg:hover{
transform: scale(1.5);
}
.rightimg:hover{
transform: scale(1.5);
}
.center:hover{
transform: scale(1.5);
}
Related
I've got this code...
<img class="logo" src="img/logo.jpg"> <!-- Logo size is 96x96 -->
...and this
.logo {
transition: .5s;
}
.logo:hover {
transition: .5s;
width: 128px;
height: 128px;
}
It resizes on hovering, but not with transitioning. I just hover it and it instantly resizes, and I have no idea why does transition not work.
There are several things wrong with the CSS causing it not to transition.
First, as #WaisKamal said, you need to set initial states to transition from. Images size automatically in HTML but that's not a valid starting point for CSS.
Second, you need to define WHAT properties are being transitioned.
So you would need to add width and height. Or you can use the all identifier:
.logo {
display:block; //make sure the image is a block element
width: 96px;
height: 96px;
transition: all 0.5s linear;
}
.logo:hover {
width: 128px;
height: 128px;
}
Now that will work but it's going to be kind of janky since animating height/width cause page repaints.
Instead, I would suggest using a transform on the image.
.logo {
display:block; //make sure the image is a block element
// initial size is fine here because we're using a transform
transition: transform 0.5s ease-in-out;
}
.logo:hover {
transform: scale(2) // decimal notation 2 = 200% = 128x128px
}
There is no need to define the same transition property for the image and the hover pseudoclass. If you don't define transition in .logo:hover, it will take the previously set value of half a second.
The problem here is that you must specify an initial width and height for the image in order to have it resize smoothly.
I'm working on a masonry type layout where I have a container with a column-count property, and then items with rounded corners that hold images. I want the images to give a little transform: scale on hover, but with this combination of css the rounded borders disappear during the transition.
Is there any way around it?
.container {
column-count: 2;
}
.item {
width: 100%;
overflow: hidden;
border-radius: 10px;
}
img {
max-width: 100%;
max-height: 100%;
transition: all 0.2s;
}
img:hover {
transform: scale(1.1);
}
<div class="container">
<div class="item">
<img src="https://images.unsplash.com/photo-1558834643-1dacaf774843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
</div>
</div>
Update: As of late, this seems to be happening again, but only in elements using CSS columns. I've filed it as a Chromium bug here.
Update 2: Filed bug was closed as "Won't fix" as it has already been somewhere between v75.* and v77.0.3833.0, there's currently no available info on what caused it and what fixed it.
By default, transform does not trigger a repaint on the parent node at each animation frame, which is precisely why it's the recommended method of animation, along with opacity (which has the same behavior).
But in your case, you want this repaint after each frame. So you need to apply a cheap transform on the parent as well.
In your case, a simple rotate(0) will suffice, but note there are cases when you want to keep the 3d engine running, in which case a good candidate is rotateZ(0).
Additionally, to make sure there's no space between the bottom of the image and it's wrapper, you could apply display:block to the <img>:
.container {
column-count: 2;
}
.item {
width: 100%;
overflow: hidden;
border-radius: 10px;
transform: rotate(0);
}
img {
max-width: 100%;
max-height: 100%;
transition: all 0.2s;
display: block;
min-width: 100%;
}
img:hover {
transform: scale(1.1);
}
<div class="container">
<div class="item">
<img src="https://images.unsplash.com/photo-1558834643-1dacaf774843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
</div>
</div>
Suggestion: since this doesn't seem to be directly related with using column-count, I suggest removing it from title, to increase its indexing and help others, with the same problem but not using column-count, find it easier.
I'd say it's strictly about parent border-radius not being applied during child item transform.
I have an image near the top of a webpage. I've made it so that when I hover on the image, it zooms in slightly. However, in doing so, I've messed something up that causes the image to only display one portion whether hover is activated or not. I've tried removing portions of the code I added, but can't seem to fix it without completely removing the hover animation. I've also tried changing margin, padding, and position. I'm using Bootstrap 4 if that makes a difference. I'm sure it's something simple, I just can't seem to figure out what needs to be changed.
Here's a link to the Codepen: https://codepen.io/amandathedev/pen/zyEyze
Here's the relevant portion of the CSS:
.imgBox {
float: left;
position: relative;
width: 640px;
height: 360px;
margin: 0 auto;
/* justify-content: center;
display: inline-block; */
overflow: hidden;
}
.imgCard {
position: absolute;
top: 0;
left: 0;
}
.imgCard img {
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}
.imgBox:hover .imgCard img {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}
You need to set transform-origin to center so that it will scale from center on, so your css must look like this:
..other css
.imgBox:hover .imgCard img {
transform: scale(1.05);
transform-origin: center;
-webkit-transform: scale(1.05);
}
Looking at your code example on codepen, the solution looks to be making the width of the img 100%. So in your example you would do something like:
.photo {
width:100%
}
However, this cuts off the bottom of the image. You're going to need to adjust the height of the imgBox that contains the imgCard. It's currently set to 360px. Because of the way your example is written, it will probably be best for you to just choose a number so that the resulting image will have the same aspect ratio as the original image (playing around with it, 478px looks like the magic number to show the entire image).
I'm trying to create a website that does the same thing this website does. www.treasurelimo.com If you scroll down on the homepage and look at 'popular destination'. When you hoover over the images the blue area expands and more info is seen.
I'm using wordpress but don't want to use any plugins. Right now I have those images being populated from other posts. Here is how mine works. Here is my site: www.sealfitdev.demosite.us/coaching-staff I got the CSS to place the words inside of picture, I just need it to expand when I hoover over it. Can anyone help me or point me to a post that shows how I can do that? I was looking over the bootstrap documentation and I wasn't successful. Thanks
You can accomplish the effect using CSS transitions (see some basic examples here).
See an example of this for your use-case at this JSFiddle (not a particularly clean example, but it should illustrate the concept).
I've taken the markup from your site and simplified it a little for clarity.
<div class="employee-thumb pull-left">
<div class="inner">
<img width="150" height="150" src="http://i.forbesimg.com/media/lists/people/elon-musk_416x416.jpg" />
<div class="info">
<p>Elon Musk</p>
<p>Additional information including buttons</p>
</div>
</div>
</div>
Now in the CSS, we can set .info to be absolutely positioned within the relative positioned parent, .inner. Since .inner's overflow is hidden the content can be pushed outside our visibility by adjusting the absolute positioning.
.inner {
position: relative;
overflow: hidden;
max-width: 150px;
}
.inner .info {
background-color: rgba(255,255,255,0.7);
position: absolute;
bottom: -4em;
}
On hovering over .inner, .info, the absolute positioning of bottom returns to 0, sliding the content up.
.inner:hover .info {
bottom: 0em;
}
And we animate the whole thing using a CSS transition.
.inner .info {
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;
}
I have img inside the div with exact width and height. I would like to place image there like background-size: cover to fill entire div so HTML is:
<div class="cover">
<img class=active src="http://pixabay.com/static/uploads/photo/2015/02/26/17/56/clock-650753_640.jpg" alt="time">
</div>
And CSS is:
.cover {
width: 400px;
height: 180px;
position: relative;
}
.cover img {
visibility: hidden;
opacity: 0;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-transition:visibility 0s linear 4.0s,opacity 2.0s linear 2.0;
transition:visibility 0s linear 4.0s,opacity 2.0s linear 2.0s;
}
.cover img.active {
visibility: visible;
opacity: 1;
}
Here is live example http://jsfiddle.net/sytwrd9L/1/ - 2 seconds after load the image disappears. In the Firefox 36 it resizes the img during transition but in other browsers it works well. Any idea how to fix not to resize img during transition in FF?
I know this is an old question, but today I found a workaround for this issue. I've tested it in Firefox 44.0 so far.
The Workaround:
<!-- Apply the transition to this element -->
<div class="transition">
<!-- Apply a 3D translate to this element -->
<div class="translate3d">
<!-- Apply object-fit to this img elemnt -->
<img src="path/to/img.jpg" class="object-fit" />
</div>
</div>
Wouldn't applying translate3d(0,0,0) to an element inside a transitioned element prevent the GPU from accelerating the transition itself?
It's the transitioning element you want to accelerate, right? But you're applying the translate3d hack that invokes GPU acceleration to an element without transitions.