How can I make the image inside of this div scale without the actual div scaling on hover? So I only want the image to get zoomed on.
Here is the code:
<div id="container">
<img id="image" src="some-image">
</div>
Use transform: scale
#container {
display: inline-block;
margin: 20px;
border: 1px solid black;
overflow: hidden; /* clip the excess when child gets bigger than parent */
}
#container img {
display: block;
transition: transform .4s; /* smoother zoom */
}
#container:hover img {
transform: scale(1.3);
transform-origin: 50% 50%;
}
<div id="container">
<img id="image" src="https://via.placeholder.com/150">
</div>
a little bit elegant solution with transition effects
#container {
display: inline-block;
overflow: hidden;
}
#container img {
display: block;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#container:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div id="container">
<img id="image" src="https://via.placeholder.com/200">
</div>
Related
I have a css transition so that when someone hovers over an image, the h2 will grow. It does kind of work, but the in addition to growing the h2 is also moving across the div. This has never happened to me before and I can't figure out why. You can see it's behavior here, if you scroll to the bottom of the page and hover over Our Story and Our Team: https://katherinemade.com/staging/mission-vision-values/
Here is my html:
<div class="img-relative-position">
<h2 class="over-image-text">Our Story</h2>
<img />
</div>
And my css:
.img-relative-position {
position: relative;
}
.over-image-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-relative-position h2 {
transition: all .2s ease-in-out;
}
.img-relative-position:hover h2 {
transform: scale(1.5);
}
Does anyone know what could be causing my h2 to move vertically across the div, and how I can keep it center but still grow?
You can do like this
.img-relative-position {
position: relative;
}
.over-image-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-relative-position h2 {
transition: all .2s ease-in-out;
}
.img-relative-position:hover h2 {
transform: scale(1.5);
}
<div class="img-relative-position">
<div class = "over-image-text"> //new div
<h2 class="over-image-text-cstm">Our Story</h2>
</div>
<img />
</div>
i think you should scale a "parent" Container so if you create something like this
<div class="img-relative-position"> // <-- the Image
<div class="scale-this-on-hover"> // <-- new container this one has to be scaled
<h2 class="over-image-text">Our Story</h2>
<img />
</div>
</div>
No need To add scale property to increase text size
.img-relative-position:hover h2 {
/* transform: scale(1.5); */ // Remove This Line
font-size: 60px; // Add font-size
}
Thanks
I think you are missing transform-origin: center on h2. I have made a snippet for you. Have a look.
Thanks me later.
* {
box-sizing: border-box;
}
.wrap {
margin: 40px;
width: 300px;
height: 200px;
line-height: 200px;
background: green;
color: #fff;
text-align: center;
}
.wrap h2 {
transition: .3s ease;
transform-origin: center center;
}
.wrap:hover h2 {
transform: scale(1.5);
}
<div class="wrap">
<h2>Hello Test</h2>
</div>
For Extra Hover Effect You Can use This Css I Hope You Like It :)
.img-relative-position {
position: relative;
overflow: hidden;
}
.over-image-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 2;
transition: all 0.5s ease-in-out;
}
.img-relative-position:hover h2 {
font-size: 60px;
}
.img-relative-position a {
display: block;
}
.img-relative-position img {
transition: all 0.5s ease;
}
.img-relative-position:hover img {
transform: scale(1.2) rotate(-5deg);
}
Thanks
I know this has been asked quite often, but no solution seems to apply to my situation. I imagine it's something simple that I'm not seeing. Hopefully someone can point me in the right direction.
The Problem
I have a vertical stack of icons that remain to the left of the page as one scrolls down. Everything appears to work, except that the containing divs won't shrink to their content, which prevents users from interacting with part of the interface:
Notice that the Div expands well beyond the image it contains. This interferes with selecting the radio buttons. Here's the markup:
.navStack {
display: table;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: -5%;
}
.navStack div {
width: auto;
}
.navIcons {
transition: all 0.3s ease;
width: auto;
max-Width: 10%;
max-Height: 10%;
margin: 4px 0;
-webkit-filter: brightness(100%);
filter: brightness(100%);
cursor: pointer;
display: inline-block;
}
.navIcons:hover {
transform: scale(1.5);
-webkit-filter: brightness(70%);
filter: brightness(70%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
<div class='navStack'>
<div>
<img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
<div>
<img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
</div>
Things I've tried
Display: inline-block / Display: table are the most common solutions. Placing them on 'navStack' does nothing. Placing inline-block on 'navStack div' gets me this:
Display: inline - on 'navStack' there's no response; on 'navStack div' this:
Placing a width doesn't do anything.
Inline-Flex on 'navStack div' gets the same as the above; on 'navStack' in gets me this:
width: min-content - whether it's 'navStack' or 'navStack div', the images completely disappear when applying this.
Per one comment, I've played with max-width/height in'navIcons' and added it to 'navStack div' to look like this:
.navStack div {
max-height: 10%;
max-width: 10%;
border: 1px solid;
}
.navIcons {
transition: all 0.3s ease;
width: auto;
max-width: 100%;
max-height: unset;
/* max-Width: 10%;
max-Height: 10%; */
margin: 4px 0;
-webkit-filter: brightness(100%);
filter: brightness(100%);
cursor: pointer;
display: inline-block;
}
<div class='navStack'>
<div>
<img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
<div>
<img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
</div>
Here's the result:
Progress
There has been progress thanks to the kind help of people below. With the latest CSS (last CSS above), the 'navStack div' elements are not extending anymore, however, the 'navStack' is:
The solution to this was to apply sizing to both the parent div, its children, and the images.
Specifically, I've applied to 'navStack' a 'max-Width: 10%', to 'navStack div' a max-height: 40%; and max-width: 40%;, and to 'navIcons' width: auto; max-width: 100%; max-height: unset;
The final markup looks like this:
.navStack {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: -5%;
max-width: 10%;
}
.navStack div {
max-height: 40%;
max-width: 40%;
}
.navIcons {
transition: all 0.3s ease;
width: auto;
max-width: 100%;
max-height: unset;
margin: 4px 0;
-webkit-filter: brightness(100%);
filter: brightness(100%);
cursor: pointer;
display: inline-block;
}
<div class='navStack'>
<div>
<img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
<div>
<img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
</div>
I see you've already answered your own question, but I will throw mine in nonetheless. I believe you are seeing things more complicated than they need to be.
By simply specifying the max-width on your navstack, the rest of the elements should follow when you set them to a width of 100%, giving the following markup :
.navStack {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
max-width: 10%;
}
.navStack div {
width: 100%;
}
.navIcons {
transition: all 0.3s ease;
width: 100%;
margin: 4px 0;
-webkit-filter: brightness(100%);
filter: brightness(100%);
cursor: pointer;
display: inline-block;
}
Use This Code:
<style>
.navStack {
display: table;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: 0;
}
.navStack div {
width: 40px;
}
.navIcons {
transition: all 0.3s ease;
width:100%;
margin: 4px 0;
-webkit-filter: brightness(100%);
filter: brightness(100%);
cursor: pointer;
display: inline-block;
}
.navIcons:hover {
transform: scale(1.5);
-webkit-filter: brightness(70%);
filter: brightness(70%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
</style>
HTMl:
<div class='navStack'>
<div>
<img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
<div>
<img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
</div>
When sizing your image a percentage of the parent div, the div stays the same size. So if you need to shrink the size of image, change your code as follow:
.navStack {
max-width: 10%;
}
.navIcons {
width: 100%;
/* max-width: 10%; */
/* max-height: 10%; */
}
The reset of your code stays the same.
On hover, the scale transform starts to overlap the other pictures in it's row. I'm not sure how to prevent this and just have the scale stay within it's own picture.
HTML
<div id="pictures">
<img src="/pic1.jpg"/>
<img src="/pic2.jpg"/>
<img src="/pic3.jpeg"/>
</div>
CSS
#pictures {
text-align: justify;
overflow: hidden;
}
#pictures img {
display: inline-block;
width: 350px;
height: 350px;
}
#pictures:after {
content: '';
display: inline-block;
width: 100%;
}
#pictures img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .9s ease-in-out;
transition: .9s ease-in-out;
}
#pictures img:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
I am trying to center an image on the page. I am using this:
#logo img {
max-width: 100%;
height: auto;
width: auto\9;
display: block;
margin: 55px auto;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
}
#logo img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
margin-bottom: 100px;
}
<div id="logo">
<a href="http://sapsrp.x10.bz/">
<img src="images/logo.png" alt="SAPS Logo">
</a>
</div>
I want JUST the logo to be link, not the empty space next to it. What I mean, here
Adjust your CSS like this. You need to specify the width of the image
#logo img {
display: block;
margin-top: 55px auto;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
width: 100px;
height: auto;
}
#logo img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
margin-bottom: 100px;
}
<div id="logo">
<a href="http://sapsrp.x10.bz/">
<img src="images/logo.png" alt="SAPS Logo">
</a>
</div>
If you want to maintain giving no size to the image you could remove the tag and alter the tag like this.
<img src="images/logo.png" alt="SAPS Logo" onclick='window.location="http://sapsrp.x10.bz/"'>
This is a slight hack as the user will not be able to right click to open the image in a new tab. Note, you will also need to give the img tag the cursor:pointer style
Change your css with these rules bellow
#logo {
text-align:center;
}
#logo img {
max-width: 100%;
height: auto;
width: auto;
margin: 55px auto;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
}
working fiddle https://jsfiddle.net/za5cgfLw/2/
#logo {
text-align: center;
}
#logo a {
display: inline-block;
margin: 55px auto;
}
#logo img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
}
#logo img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
margin-bottom: 100px;
}
<div id="logo">
<a href="http://sapsrp.x10.bz/">
<img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png" alt="SAPS Logo">
</a>
</div>
I'm currently trying to create a zoom effect on hover over one of my four images. The problem is most examples usually use tables or mask divs to apply some sort of effect.
Here's one example that implements what I would like this.
This is my code so far.
HTML
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
</div>
CSS
#menu {
max-width: 1200px;
text-align: center;
margin: auto;
}
#menu img {
width: 250px;
height: 375px;
padding: 0px 5px 0px 5px;
overflow: hidden;
}
.blog {
height: 375px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blog:hover {
cursor: pointer;
height:475px;
width: 350px;
}
.music {
height: 375px;
}
.projects {
height: 375px;
}
.bio {
height: 375px;
}
What about using CSS3 transform property and use scale which ill give a zoom like effect, this can be done like so,
HTML
<div class="thumbnail">
<div class="image">
<img src="http://placehold.it/320x240" alt="Some awesome text"/>
</div>
</div>
CSS
.thumbnail {
width: 320px;
height: 240px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Here's a demo fiddle. I removed some of the element to make it simpler, you can always add overflow hidden to the .image to hide the overflow of the scaled image.
zoom property only works in IE
Here you go.
Demo
http://jsfiddle.net/27Syr/4/
HTML
<div id="menu">
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
</a>
</div>
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="blog" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
</a>
</div>
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
</a>
</div>
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="blog" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
</a>
</div>
</div>
CSS
#menu {
text-align: center; }
.fader {
/* Giving equal sizes to each element */
width: 250px;
height: 375px;
/* Positioning elements in lines */
display: inline-block;
/* This is necessary for position:absolute to work as desired */
position: relative;
/* Preventing zoomed images to grow outside their elements */
overflow: hidden; }
.fader img {
/* Stretching the images to fill whole elements */
width: 100%;
height: 100%;
/* Preventing blank space below the image */
line-height: 0;
/* A one-second transition was to disturbing for me */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease; }
.fader img:hover {
/* Making images appear bigger and transparent on mouseover */
opacity: 0.5;
width: 120%;
height: 120%; }
.fader .text {
/* Placing text behind images */
z-index: -10;
/* Positioning text top-left conrner in the middle of elements */
position: absolute;
top: 50%;
left: 50%; }
.fader .text p {
/* Positioning text contents 50% left and top relative
to text container's top left corner */
margin-top: -50%;
margin-left: -50%; }
Suggestion
Instead of .fader { inline-block; } consider using some grid system. Based on your technology of preference, you can go Foundation, Susy, Masonry or their alternatives.
.aku {
transition: all .2s ease-in-out;
}
.aku:hover {
transform: scale(1.1);
}
I like using a background image. I find it easier and more flexible:
DEMO
CSS:
#menu {
max-width: 1200px;
text-align: center;
margin: auto;
}
.zoomimg {
display: inline-block;
width: 250px;
height: 375px;
padding: 0px 5px 0px 5px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
transition: all .5s ease;
}
.zoomimg:hover {
cursor: pointer;
background-size: 150% 150%;
}
.blog {
background-image: url(http://s18.postimg.org/il7hbk7i1/image.png);
}
.music {
background-image: url(http://s18.postimg.org/4st2fxgqh/image.png);
}
.projects {
background-image: url(http://s18.postimg.org/sxtrxn115/image.png);
}
.bio {
background-image: url(http://s18.postimg.org/5xn4lb37d/image.png);
}
HTML:
<div id="menu">
<div class="blog zoomimg"></div>
<div class="music zoomimg"></div>
<div class="projects zoomimg"></div>
<div class="bio zoomimg"></div>
</div>
DEMO 2 with Overlay
Simply:
.grow { transition: all .2s ease-in-out; }
This will allow the element to assign an animation via css.
.grow:hover { transform: scale(1.1); }
This will make it grow!
.item:hover img
{
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
this way you can zoom any image with simple animation. If you need a complete tutorial here is a official tutorial: http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php
SOLUTION 1: You can download zoom-master.
SOLUTION 2: Go to here .
SOLUTION 3: Your own codes
.hover-zoom {
-moz-transition:all 0.3s;
-webkit-transition:all 0.3s;
transition:all 0.3s
}
.hover-zoom:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.5)
}
<img class="hover-zoom" src="https://i.stack.imgur.com/ewRqh.jpg"
width="100px"/>
<div class="item">
<img src="yamahdi1.jpg" alt="pepsi" width="50" height="58">
<img src="yamahdi.jpg" alt="pepsi" width="50" height="58">
<div class="item-overlay top"></div>
css:
.item img {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
just want to make a note on the above transitions only need
-webkit-transition: all 1s ease; /* Safari and Chrome */
transition: all 1s ease;
and -ms- certainly doenst work for IE 9 i dont know where you got that idea from.
.img-wrap:hover img {
transform: scale(0.8);
}
.img-wrap img {
display: block;
transition: all 0.3s ease 0s;
width: 100%;
}
<div class="img-wrap">
<img src="http://www.sampleimages/images.jpg"/> // Your image
</div>
This code is only for zoom-out effect.Set the div "img-wrap" according to your styles and insert the above style results zoom-out effect.For zoom-in effect you must increase the scale value(eg: for zoom-in,use
transform: scale(1.3);
#import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,700&subset=latin-ext');
body{ font-family: 'Muli', sans-serif; color:white;}
#lists {
width: 350px;
height: 460px;
overflow: hidden;
background-color:#222222;
padding:0px;
float:left;
margin: 10px;
}
.listimg {
width: 100%;
height: 220px;
overflow: hidden;
float: left;
}
#lists .listimg img {
width: 350px;
height: 220px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#lists:hover{cursor: pointer;}
#lists:hover > .listimg img {
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
-webkit-filter: blur(5px);
filter: blur(5px);
}
#lists h1{margin:20px; display:inline-block; margin-bottom:0px; }
#lists p{margin:20px;}
.listdetail{ text-align:right; font-weight:200; padding-top:6px;padding-bottom:6px;}
<div id="lists">
<div class="listimg">
<img src="https://lh3.googleusercontent.com/WeEw5I-wk2UO-y0u3Wsv8MxprCJjxTyTzvwdEc9pcdTsZVj_yK5thdtXNDKoZcUOHlegFhx7=w1920-h914-rw">
</div>
<div class="listtext">
<h1>Eyes Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>Click for More Details...</p>
</div>
</div>
<div id="lists">
<div class="listimg">
<img src="https://lh4.googleusercontent.com/fqK7aQ7auobK_NyXRYCsL9SOpVj6SoYqVlgbOENw6IqQvEWzym_3988798NlkGDzu0MWnR-7nxIhj7g=w1920-h870-rw">
</div>
<div class="listtext">
<h1>Two Frogs Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>More Details...</p>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.zoom {
overflow: hidden;
}
.zoom img {
transition: transform .5s ease;
}
.zoom:hover img {
transform: scale(1.5);
}
</style>
</head>
<body>
<h1>Image Zoom On Hover</h1>
<div class="zoom">
<img src="/image-path-url" alt="">
</div>
</body>
</html>
Add jQuery JavaScript library together with the jquery.zbox.css and jquery.zbox.js to your webpage.
<link rel="stylesheet" href="jquery.zbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.zbox.min.js"></script>
Add a group of thumbnails with links pointing to the full sized images into the webpage.
<a class="zb" rel="group" href="1.png" title="Image 1">
<img src="thumb1.png">
</a>
<a class="zb" rel="group" href="2.png" title="Image 2">
<img src="thumb2.png">
</a>
<a class="zb" rel="group" href="3.png" title="Image 3">
<img src="thumb3.png">
</a>
Call the function on document ready. That's it.
In the view source do:
$(".zb").zbox();