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/
Related
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 quite new to CSS and HTML and I want to create an image that zooms in fast when you hover. But the box radius zooms in as well. I know I'm doing something wrong with my div classes but I can't figure out what exactly.
So I mean I want an effect like this:
http://designshack.net/tutorialexamples/imagehovers/zoomandpan.html
(the blonde girl one)
This is the relevant code:
#circle {
border: 4px solid;
height:200px;
width:200px;
border-color: #000;
border-radius: 100px;
}
.bolimg{
background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat;
height:200px;
width:200px;
-webkit-border-radius: 100px;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
-ms-transition: 2s ease-out;
transition: 2s ease-out;
}
.bolimg:hover {
opacity:1;
background-image: url('http://i59.tinypic.com/k0szuv.jpg');
-webkit-transition: 2.5s ease-out;
-moz-transition: 2.5s ease-out;
-o-transition: 2.5s ease-out;
-ms-transition: 2.5s ease-out;
transition: 2.5s ease-out;
-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);
}
and this is the body
<div id="circle" class="bolimg">
</div>
</div>
Excuse my english it's very bad and I'm sorry if this is a stupid question. Thanks in advance.
Place the background image div within a container:
<div class="container">
<div class="bolimg"></div>
</div>
Move the dimensions and border to the container, and give it overflow: hidden:
.container {
width: 200px;
height: 200px;
border: 4px solid black;
border-radius: 100px;
overflow: hidden;
}
Use these styles for the bolimg class:
.bolimg {
background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat;
background-size: cover;
width: 100%;
height: 100%;
transition: 2s ease-out;
}
And use these styles on its hover:
.bolimg:hover {
background-image: url('http://i59.tinypic.com/k0szuv.jpg');
height: 125%;
width: 125%;
}
Animating height and width instead of scale solves a problem with Chrome and borders.
Complete code:
.container {
width: 200px;
height: 200px;
overflow: hidden;
border: 4px solid black;
border-radius: 100px;
}
.bolimg {
background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat;
background-size: cover;
width: 100%;
height: 100%;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
-ms-transition: 2s ease-out;
transition: 2s ease-out;
}
.bolimg:hover {
background-image: url('http://i59.tinypic.com/k0szuv.jpg');
height: 125%;
width: 125%;
}
<div class="container">
<div class="bolimg"></div>
</div>
you need to add an overflow: hidden; style to the #circle element and make the .bolimg a nested <div>.
See snippet:
#circle {
border: 4px solid;
height:200px;
width:200px;
border-color: #000;
border-radius: 100px;
overflow:hidden;
}
.bolimg{
background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat;
height:200px;
width:200px;
-webkit-border-radius: 100px;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
-ms-transition: 2s ease-out;
transition: 2s ease-out;
}
.bolimg:hover {
opacity:1;
background-image: url('http://i59.tinypic.com/k0szuv.jpg');
-webkit-transition: 2.5s ease-out;
-moz-transition: 2.5s ease-out;
-o-transition: 2.5s ease-out;
-ms-transition: 2.5s ease-out;
transition: 2.5s ease-out;
-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);
}
<div id="circle">
<div class="bolimg"></div>
</div>
Looks cool in Firefox but Chrome does some ugly transitions -.-
I am brand new to coding.
I am trying to get text to appear when the user rolls over an image, like these images here: http://www.enthusiastic.co/
So far I have this:
#imagelist {
font-size: 0;
}
#imagelist a {
margin: 5px;
display: inline-block;
background: #000;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#imagelist img {
-webkit-border-radius: 3px;
border-radius: 3px;
width: 400px;
height: 300px;
o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#imagelist img:hover {
opacity: .2;
width: 400px;
height: 300px;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#imagelist span {
display: none;
font-size: 13px;
color: red;
}
#imagelist span:hover {
display: block;
}
<div id="imagelist">
<a href="https://google.com" target="_blank">
<img src="http://static2.businessinsider.com/image/4d7533c849e2aec902170000/this-man-can-predict-the-future-our-exclusive-qa-with-christopher-ahlberg-ceo-of-recorded-future.jpg" width="400" height="300">
<span>View</span>
</a>
</div>
I know it has something to do with the span tag but I can't figure it out. Any help would be much appreciated. Thanks.
What you need is to set the :hover action to the a tag and also use absolute position for the span. Check this:
#imagelist {
font-size: 0;
}
#imagelist a {
margin: 5px;
display: inline-block;
background: #000;
-webkit-border-radius: 4px;
border-radius: 4px;
position:relative;
}
#imagelist img {
-webkit-border-radius: 3px;
border-radius: 3px;
width: 400px;
height: 300px;
o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#imagelist a:hover img{
opacity: .7;
width: 400px;
height: 300px;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#imagelist span {
display: none;
font-size: 23px;
color: red;
line-height:300px;
text-align:center;
position:absolute;
top:0;left:0;
width:100%;
}
#imagelist a:hover span{
display: block;
}
<div id="imagelist">
<a href="https://google.com" target="_blank">
<img src="http://static2.businessinsider.com/image/4d7533c849e2aec902170000/this-man-can-predict-the-future-our-exclusive-qa-with-christopher-ahlberg-ceo-of-recorded-future.jpg" width="400" height="300">
<span>View</span>
</a>
</div>
Here's an easy code on bootply:
http://www.bootply.com/90238
It uses bootstraps native features along with this tiny bit of JS
$("[rel='tooltip']").tooltip();
$('.thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
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;
}
I have this HTML document:
<div id="c">
<div class="base">
<div class="cb" id="red" data-color="Red">
</div>
</div>
<div class="base">
<div class="cb" id="green" data-color="Green">
</div>
</div>
<div class="base">
<div class="cb" id="blue" data-color="Blue">
</div>
</div>
</div>
and this is my CSS:
<style type="text/css">
.cb {
display: inline-block;
background-color: #56a100;
width: 70%;
height: 70%;
margin-top: 15%;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.cb:hover {
display: inline-block;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
width: 100%;
height: 100%;
margin-top: auto;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.base {
display: inline-block;
width: 50px;
height: 50px;
margin-left: 5px;
margin-top: 20px;
border-style: ridge;
text-align: center;
vertical-align: central;
}
</style>
but when I put mouse on one of the .cb elements the others go down!
you can see Demo Here. Does anybody how to stop the other elements to going down?
Remove display: inline-block; from .base class and make it float to the left float: left;.
Here's fixed demo http://jsfiddle.net/pTCFL/2/