I want to have an image frame that when I hove over it the image inside will zoom in a little (I am using size transition), but the frame will stay the same size.
What happens now that even if the frame has a fixed width and height it is stilled zoomed with the image
HTML:
<div class="img-wrapper">
<img class="thumbnail" src="http://placekitten.com/400/200">
</div>
and CSS
.img-wrapper {
width: 400px;
}
.thumbnail {
width: 400px;
}
.thumbnail {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.thumbnail:hover {
width: 500px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
http://codepen.io/pen/KCJny
One way to fix this would be to set overflow:hidden;
So, this might work:
.img-wrapper {
width: 400px;
height:200px;
overflow:hidden;
}
If you want the image to stay centered (as an addition to Brian's answer) you can do this:
.thumbnail {
width: 400px;
position:relative;
left:50%;
margin-left:-200px;
}
.thumbnail:hover {
width: 500px;
margin-left:-250px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
Related
I have a simple code with CSS transition and image hover effect.
Codepen Demo
background-color: rgba(0, 0, 0, 0.22);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease;
visibility:hidden;
overflow:hidden;
Could you please explain to me:
Why this part causes left to right animation? (apparently "all" property)
transition: all 0.2s ease;
How can I change it to make a simple fade instead of left/right move? Do I have to use jQuery for it?
Thanks
Kris
Change your CSS to the following:
.item .overlay {
position: absolute;
left: 0%;
top:0;
width: 0%;
height: 100%;
opacity:0;
background-color: rgba(0, 0, 0, 0.22);
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
overflow:hidden;
}
And on hover
.item:hover .overlay {
top: 0;
left: 0;
visibility: visible;
width: 100%;
height: 100%;
opacity: 1;
}
Updated codepen demo
the left to right is because the position of
.item:hover .overlay and .item .overlay are both 'left: 0;' if you change both to 'right: 0;' you get the animation from right to left
no Jquery is required for a fade effect, you could just add two css properties (opacity) opacity 0 on the .item .overlay and opacity 1 on the .item:hover .overlay
i have an image and a border around it i want to add blur hover to the image only but the blur covers the image and the border here's the code
.ex{
border-radius: 1000px;
margin-right: 20px;
border: 10px solid #fff;
overflow: hidden
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.ex:hover{
-webkit-filter: blur(5px);
cursor:pointer;
<img src="img/13.jpg" alt="" width="200" height="200" class="ex">
You can wrap the image in a parent element, then that element to create the circle border, and give it a positive z-index so the image doesn't pop out when you apply filter.
.wrap {
width: 200px;
height: 200px;
margin-right: 20px;
position: relative;
}
.wrap {
border-radius: 100%;
overflow: hidden;
z-index: 1;
}
.ex {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
max-width: 100%;
display: block;
}
.wrap:hover {
cursor: pointer;
}
.wrap:hover .ex {
-webkit-filter: blur(5px);
}
<div class="wrap">
<img src="https://scontent-dft4-1.cdninstagram.com/t51.2885-15/e35/17266233_1741922516118154_2155597975093510144_n.jpg" alt="" class="ex">
</div>
Wrap your image with a div, set the div size and overflow:hidden and you archive that.
.img-wrapper-for-blur {
border-radius: 1000px;
width: 200px;
height: 200px;
overflow: hidden;
}
removing border-radius from your .ex style and the markup changed by this:
<div class="img-wrapper-for-blur">
<img src="img/13.jpg" alt="" width="200" height="200" class="ex">
</div>
Instead of using a border, you can wrap the image in a div, give that div some padding and a white background, and then leave the blur on the image.
HTML
<div class="border">
<img src="http://www.placehold.it/200x200" alt="" width="200" height="200" class="ex">
</div>
CSS
.ex {
border-radius: 100%;
overflow: hidden -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.ex:hover {
-webkit-filter: blur(5px);
cursor: pointer;
}
.border {
border-radius: 100%;
margin-right: 20px;
background-color: #fff;
display: inline-block;
padding: 10px;
}
Here is a fiddle: https://jsfiddle.net/fm1hLy6h/
I would like to have rotate and zoom efect on pictures here
http://cpband.itvp.eu/
, but i would like to keep them croped in the same box.
like here
http://cpband.itvp.eu/test.php
trick should be in
overflow: hidden;
, but I am not able to figureout how to make it work.
Thanks for the tips!
you may add the rotation to the container :
.pic {
overflow: hidden;
}
.grow img, .grow {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow:hover {
transform:rotate(15deg);
}
.grow:hover img {
width: 400px;
height: 400px;
}
/* DEMO PURPOSE */
html {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>
or is only to the image ? Also, transform can do both(zoom&rotate)
.pic {
overflow: hidden;
}
.grow img, .grow {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow:hover img {
transform:rotate(15deg) scale(1.25);
}
/* DEMO PURPOSE */
html {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>
Html:
<div id="container">
<img src="picture.jpg" id="picture" />
</div>
Css:
#container{
overflow:hidden;
width:100px;
height:100px;
}
#picture{
height:300px;
width:300px;
}
I'm having a issue with a transition css property in a button tag.
When I hover the button I supposed it will go smoothly to width:auto, but it jump directly.
This is the code, what did I miss?
<button>Hello</button>
button {
padding: 10px;
width: 30px;
overflow:hidden;
transition: width 400ms ease-in-out;
-webkit-transition: width 400ms ease-in-out;
-moz-transition: width 400ms ease-in-out;
}
button:hover {
width: auto;
}
max-width is your friend
Demo
button {
padding: 10px;
width: auto;
max-width: 30px;
overflow:hidden;
transition: max-width 400ms ease-in-out;
-webkit-transition: max-width 400ms ease-in-out;
-moz-transition: max-width 400ms ease-in-out;
}
button:hover {
max-width: 100%;
}
Transition won't work with width: auto; you have to give a value in px, ems, percentage or whatever...
I'm trying to make an affect on a box to drop 5px down when hovering.
It does work smoothly on Chrome but on firefox it's doesn't do the transition.
Please have a look at the next codepen using firefox and using chrome
<div class="test"></div>
.test {
background-color:blue;
width: 200px;
height: 200px;
#include transition(transform .3s 0 ease);
#include transform(translateY(0));
&:hover {
#include transform(translateY(5px));
}
}
Using Padding
Here's my preferred method using only padding:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
margin-top: 10px;
}
.transition {
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
Using Transform
Or if you still want to use transform:
JSFiddle DEMO
CSS:
body {
margin: 0;
padding: 0;
}
.test {
background-color:blue;
width: 200px;
height: 200px;
}
.test:hover {
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10p));
-o-transform: translateY(10px);
transform: translateY(10px);
}
.transition {
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
}
As Kiran said already, each browser has varying support for directly using transform and transition. You can check who can use transforms here and transitions here.
Also take note that the transition wasn't applied to the :hover. It needs to be called at the base level (in this case at the div level).
Hi i guess will might help you out http://codepen.io/anon/pen/dHBni
check below css to find transitions property for different browsers
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
cursor: pointer;
}
.box:hover {
background-color: green;
}
for more information about transition http://css3.bradshawenterprises.com/transitions/