I am trying to grow the image using scale and zoom on hover, but it is overlapping the text on hover, as shown in this image: http://private.teunstrik.com/blog/wp-content/uploads/2017/05/Schermafbeelding-2017-05-13-om-18.16.02.png
Does anyone know what's the problem?
Code:
div.item {
overflow: hidden;
}
.item img {
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-moz-transform: scale(1,2);
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
.item img:hover {
-moz-transform: scale(2,1);
-webkit-transform: scale(2,1);
transform: scale(2,2);
}
Thanks
Fixed by using another class that controls the image.
.zoom-image {
width: 100%;
height:75px;
overflow: hidden;
}
.item img {
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-moz-transform: scale(1,2);
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
.item img:hover {
-moz-transform: scale(2,1);
-webkit-transform: scale(2,1);
transform: scale(2,2);
}
And then, for example:
<div class="item">
<div class="zoom-image">
<img src="http://prizem.dreamhosters.com/test/test_small_1.jpg">
</img>
</div>
<span class="caption">Test image
<br>Bekijk...</span>
</div>
Related
I'm currently working on this site, I've added an animation to this, however the animation seems to skip when hovering in and out. It seems very random, sometimes it will skip to the end of the animation, other times it will skip to the start.
/*** GRID ***/
* {
box-sizing: border-box;
}
.row:after, .row:before {
content: "";
display: block;
overflow: hidden;
}
.row:after {
clear: both;
}
.row>* {
float: left;
}
.col-1-2 {
width: 50%;
}
/*** CODE ***/
.post {
position: relative;
overflow: hidden;
}
.post img {
width: 100%;
height: auto;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.panel {
display: flex;
align-items: center;
position: absolute;
z-index: 10;
padding: 0 80px;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
background: rgba(0,200,200,0.5);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.post:hover .panel {
opacity: 0;
}
.post:hover img {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
<div class="row">
<div class="col-1-2">
<div class="post">
<div class="panel">
<div class="content">
<span>Text</span>
<h1>More Text</h1>
</div>
</div>
<img src="http://placeholdit.imgix.net/~text?txtsize=33&txt=800%C3%97550&w=800&h=550" />
</div>
</div>
<div class="col-1-2">
</div>
</div>
I've made a codepen to replicate it.
Hover over the image until the animation has fully stopped.
Hover out and back in again.
Does it cut to the end rather than transition?
Any help is much appreciated (it's driving me insane)
It seems to be a bug with Chrome using opacity. I've swapped to using rgba values instead.
So i'm trying to create a portfolio with an hover with text.
I tried to make it a little responsive with bootstrap, but I can't get it right how the image is centered in the div when you scaling down.
I really wanna get something like this ( https://www.weblounge.be/en/ )
With an high of 100% and a width of 100% to always show the full size of the image when resizing.
I guess I do something wrong but can't find the issue.
my buildup is
<div class="col-lg-4 col-sm-6 nopad">
<div class="box">
<img src="http://i.imgur.com/DuUtNax.jpg">
<div class="overlay">
<h5>Random website</h5>
<p class="text">Random text</p>
</div>
</div>
</div>
and the css
.container {
background-color: #fff;
padding: 100px 0px 100px 0px;
.nopad {
padding-left: 0px;
padding-right: 0px;
}
.box {
cursor: pointer;
height: 400px;
position: relative;
overflow: hidden;
width: 100%;
text-align: left;
img {
position: absolute;
width: 100%;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.overlay {
background: rgba(0, 0, 0, 0.7);
position: absolute;
left: 0;
z-index: 100;
opacity: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
text-align: center;
padding-top: 20%;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
h5 {
color:#fff;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
transform: translateY(60px);
-webkit-transform: translateY(60px);
}
p {
color: #fff;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
transform: translateY(60x);
-webkit-transform: translateY(60px);
}
.button-white {
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
transform: translateY(60px);
-webkit-transform: translateY(60px);
margin: 0px;
}
}
&:hover img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
&:hover .overlay {
opacity: 1;
h5 {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
p {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
}
}
}
My codepen to show what is wrong: http://codepen.io/denniswegereef/pen/MwJXde
You need to use the product images as a background-image in a product div:
<div class="box">
<div class="product-image" style="background-image: url(http://i.imgur.com/DuUtNax.jpg)"></div>
...
</div>
and then change your css from .box img, to .box .product-image:
.box {
.product-image {
position: absolute;
width: 100%;
height:100%;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
background-repeat: no-repeat;
background-size: cover;
}
&:hover .product-image {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
http://jsfiddle.net/8pfjdmb4/
Demo
The core of the flipping animation is on transform: rotateY(180deg);. Of course transition is needed as well for animation. I copied the code from another site, which uses transition: all ...;.
For some reason, some properties (eg: height, width) must have no transition. But I don't know which properties are essential for flipping animation.
Anyone knows how I can change the line transition: all ...; to keep the flipping animation, while not affecting unrelated properties?
This page explains everything and has live demos. I've just needed a simple Google search. :)
http://desandro.github.io/3dtransforms/docs/card-flip.html
Apparently, the trick is to use
transition: transform 1s;
change the style when you :hover on parent
.card {
-moz-perspective: 600;
-webkit-perspective: 600;
perspective: 600;
position: relative;
height: 200px;
width: 200px;
}
.card .side {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
-moz-transform-style: perserve-3d;
-webkit-transform-style: perserve-3d;
transform-style: perserve-3d;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.card .side.front {
z-index: 900;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.card:hover .side.front {
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card .side.back {
z-index: 800;
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card:hover .side.back {
z-index: 800;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
<article class="card">
<section class="side front">front</section>
<section class="side back">back</section>
</article>
I've got 3 images superposed for a css animation on a link hover. I'm using position:absolute for overlaying the 2 animated images. But then i don't know how i could center the animation on the page.
Here is the CodePen
http://codepen.io/beng_beng/pen/IHAFD
<div id="avatar">
<img src="http://placehold.it/174x174" alt="rotator">
<a id="rotator" href="#"><img src="http://s28.postimg.org/gfrse4h7d/small.png" alt="rotator"><span><img src="http://s27.postimg.org/j6qdwtowf/small.png" alt="rotator"></span></a>
</div>
body {
margin:0;
padding:0;
}
#avatar img {
position: relative;
height: 174px;
width: 174px;
border-radius: 100%;
}
a#rotator img {
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
a#rotator:hover img {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
}
a#rotator span img {
position: absolute;
width: 147px;
height: 147px;
top: 14px;
left: 14px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
a#rotator:hover span img {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
Add this to your CSS:
#avatar {
text-align:center;
position:relative;
width:147px;
margin:0 auto;
}
You can use the following trick to center images:
left: 50%;
margin-left:14px;
But changing the position of the parent object like King-King suggested is better.
#avatar {
margin:0 auto;
width:174px;
position:relative;
}
According to http://www.w3schools.com/css/css_positioning.asp
An absolute position element is positioned relative to the first
parent element that has a position other than static.
The following CSS works fine, however I am trying to add 1 or 2 seconds delay to the flip back effect. When you hover it the '.back' is visible and then when you leave the area the '.front'. I would like to add a delay so that when you leave the area it takes one or two seconds before it goes back to '.front' Is that possible?
.panel {
width: 250px!important;
height: 250px;
margin: auto!important;
position: relative;
-webkit-perspective:1000px;
}
.card {
width: 100%!important;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
background-color:#fff;
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
transition-delay: 2s;
}
.back p{
margin-top: 90px;
font-size: 20px;
text-align:center;
}
.panel:hover .front {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition:-webkit-transform 1s;
transition:transform 1s;
}
.panel:hover .back {
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition:-webkit-transform 1s;
transition:transform 1s;
transition-delay: 2s;
}
HTML
<li class="panel"><img class="front card" src="{{image}}" /><div class="back card"><p>{{model.user.full_name}}</p></div></li>
Add the transition-delay to .card - fiddle
.card {
-o-transition: all .5s 2s;
-ms-transition: all .5s 2s;
-moz-transition: all .5s 2s;
-webkit-transition: all .5s 2s;
transition: all .5s 2s;
}
.panel .front {
transition: all 2s;
}
You have to put the effect on the element in order to have it transition back without hovering on it.