My css code is:
.logo
{
width: 20px;
height: 20px;
display: inline-block !important;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.logo:hover
{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
And html is:
<a class="navbar-brand" href="#">
<img src="img/logo200x200.png" class="logo" />
Website
</a>
JSFIDDLE
Can I make image rotate not only when my mouse is on image, but also when mouse is on text?
Make the :hover cover the whole a tag. In your example e.g. like this:
.navbar-brand:hover img {
...
}
https://jsfiddle.net/abvwh7aj/
Simply replace .logo:hover with a:hover .logo!
Here the working solution:
.logo {
width: 20px;
height: 20px;
display: inline-block !important;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
a:hover .logo
{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
<a class="navbar-brand" href="#">
<img src="http://placehold.it/200x200.png" class="logo" />Website
</a>
Related
For visualization of the intended effect, go near the bottom of this site, at the "Catering Services" section, and hover over the three images.
I want my images, on hover, to zoom-in -- increase in height and width -- while the frame around it shrinks, with overflow:hidden ofcourse.
Here's what I have written so far:
<style type="text/css">
.container {
float: left;
width: 50%;
margin: 0 auto;
}
.frame {
width: 80%;
height: 50%;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 70%;
height: 45%;
}
.frame > img {
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 120%;
}
</style>
<div class="container">
<div class="frame">
<img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" alt="Image of a dumb cat sitting on a laptop" title="get off my laptop" />
</div>
</div>
<!---End of container-->
The height of the frame is shrinking but not the width. Moreover, I want the image to expand on all four sides, and the frame to shrink likewise. Can this be achieved with something other than transitions? Any suggestions or tips on how should I go about solving this?
Just animate the img's transform:scale() and you should be all set.
Hope it helps!
.container {
float: left;
width: 50%;
margin: 0 auto;
}
.frame {
width: 80%;
height: 50%;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 70%;
height: 45%;
}
.frame > img {
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover img {
transform: scale(2);
}
<div class="frame">
<img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" alt="Image of a dumb cat sitting on a laptop" title="get off my laptop" />
</div>
/* CSS used here will be applied after bootstrap.css */
body{
background-color:yellow;
}
img{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
img:hover{
-webkit-filter:blur(5px);
}
<img src="http://i.stack.imgur.com/K0jNI.png">
When you hover over the image the borders of the image flash for a bit before settling.. Is there a way to fix that?
And how do i make a text show up on the middle of the image when i hover over it?
EDIT: This now looks great in Chrome
I don't think it's entirely possible to get a super clean transition when using webkit blur. I've had a lot of rendering issues and glitches when using it before. It's a resource hog too when used on a lot of elements. My advice to change your easing to linear and target only the blur. That should tighten it up a little bit.
img{
-webkit-transition: -webkit-filter 0.5s linear;
-moz-transition: -webkit-filter 0.5s linear;
-o-transition: -webkit-filter 0.5s linear;
-ms-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
As for the text fade in. You'll need to add in an element that is initially opacity:0; but then changed to opacity:1; when the parent block is hovered. Initial HTML changed to this:
<div class='block'>
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
<span>Hey there</span>
</div>
And the new CSS
/* CSS used here will be applied after bootstrap.css */
body {
background-color: yellow;
}
img {
-webkit-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
.block {
position: relative;
width: 400px;
}
.block img {
width: 100%;
}
.block span {
opacity: 0;
-webkit-transition: all .3s;
transition: all .3s;
color: white;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
left: 0;
right: 0;
}
.block:hover > span {
opacity: 1;
}
img:hover {
-webkit-filter: blur(4px);
}
Example here
http://codepen.io/jcoulterdesign/pen/58d613e80e4a768cc9e54aa1e7aaa0af
i have a problem, HTML elements are moving while animation, i have captured 2 pics to guess what i want...
Before animation:
http://i031.radikal.ru/1406/9a/41e9b81ddaed.png
After animation:
http://i057.radikal.ru/1406/1b/c5e3f763fd98.png
all i want is, that after "transition", elements stay on their line...
Here is some HTML and CSS code
HTML
<div id="sliderdiv">
<ul>
<li>
<div id="bullets">
<div class="bullet" id="bul1"></div>
<div class="bullet" id="bul2"></div>
<div class="bullet" id="bul3"></div>
<div class="bullet" id="bul4"></div>
<div class="bullet" id="bul5"></div>
</div>
</li>
<li>
<div id="sliderimages">
<img src="sliderimages/bilberry.png">
<img src="sliderimages/dogrose.png">
<img src="sliderimages/dryedbilberry.png">
<img src="sliderimages/dryeddogrose.png">
<img src="sliderimages/dryedherbs.png">
<img src="sliderimages/wildapple.png">
</div>
</li>
<li>
<div id="arrows">
<div id="slideup"></div>
<div id="slidedown"></div>
</div>
</li>
</ul>
CSS
#sliderdiv{
text-align: center;
padding-top: 40px;
height: 771px;
width: 100%;
}
#sliderimages{
overflow: hidden;
text-align: center;
height: 771px;
width: 1187px;
}
#sliderdiv ul li{
list-style: none;
display: inline-block;
}
#arrows{
width: 26px;
margin-left: 5px;
}
#slideup{
margin-bottom: 10px;
}
#slideup{
cursor: pointer;
width: 26px;
height: 18px;
background-image: url('slideup.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
#slideup:hover{
background-image: url('slideuph.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
#slidedown{
cursor: pointer;
overflow: hidden;
margin-bottom: 380px;
width: 26px;
height: 18px;
background-image: url('slidedown.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
#slidedown:hover{
background-image: url('slidedownh.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
.bullet{
position: relative;
background-color: #747474;
width: 10px;
height: 10px;
margin-bottom: 15px;
border-radius: 30px;
border: none;
-webkit-transition: background-color, border 0.2s ease-in-out;
-moz-transition: background-color, border 0.2s ease-in-out;
-ms-transition: background-color, border 0.2s ease-in-out;
-o-transition: background-color, border 0.2s ease-in-out;
transition: background-color, border 0.2s ease-in-out;
}
.bullet:last-child{
margin-bottom: 350px;
}
.bullet:hover{
border-left: 5px;
border: solid 5px #747474;
background-color: #eeeeee;
-webkit-transition: background-color, border 0.2s ease-in-out;
-moz-transition: background-color, border 0.2s ease-in-out;
-ms-transition: background-color, border 0.2s ease-in-out;
-o-transition: background-color, border 0.2s ease-in-out;
transition: background-color, border 0.2s ease-in-out;
}
.bullet:last-child:hover{
margin-bottom: 350px;
}
#bullets{
margin-right: 10px;
}
You can set initial value for border property to 5px solid #FFFFFF to .bullet selector. Assuming here color #FFFFFF is the background color of your page (so it looks transparent).
And when hovering over the bullets replace border shorthand property with single longhand property border-color: #747474; inside the pseudo selector :hover, while border-width and border-style will be inherited from the initial border value 5px and solid
DEMO
Try adding this to your classes:
.bullet{
position: relative;
}
.bullet:hover{
right: 5px;
top: -5px;
margin-bottom: 5px;
}
I have 2 images that are changing when I hover on the first one.
On the second one, I have some text because I want a link there.
My problem is now that I want the hover image to remain when I hover over the link.
Here is my code:
#blur {
border: 1px solid #bebfc1;
position:relative;
height:450px;
width:300px;
margin:0 auto;
-webkit-transition: border 1s ease-in-out;
-moz-transition: border 1s ease-in-out;
-o-transition: border 1s ease-in-out;
transition: border 1s ease-in-out;
}
#blur img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#blur:hover {
z-index:2;
border: 1px solid #000000;
}
#blur img.top:hover {
opacity:0;
}
#blur .text {
position:absolute;
color:#bebfc1;
opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
font-family:"Segoe UI Light";
font-size:13px;
}
#blur:hover .text {
opacity:1;
}
<div id="blur">
<img class="bottom" src="http://s28.postimg.org/do5izc4gd/image.png" />
<img class="top" src="http://s28.postimg.org/a5tj2y3kd/image.png" />
<p class="text" style="bottom:6px; left:180px;">link</p>
</div>
When I hover over the link I want the red image to remain the same.
How can this be done?
Thanks !!!
DEMO here http://jsfiddle.net/VYR9q/
Okay, I fixed it in the fiddle line you provided :)
Here you are what I fixed:
#blur:hover .top {
opacity:0;
}
Instead of:
#blur img.top:hover {
opacity:0;
}
Edit from: #biziclop:
You can make it:
#blur:hover img.top
I think you should simply move :hover from the img to the common parent #blur
#blur img.top:hover {
to
#blur:hover img.top {
Live example: http://jsfiddle.net/VYR9q/2/
Change your css to :
#blur:hover img.top {
//your css
}
How would I make it so that if you hover over an image, the entire image changes to the color black (the image link must be in the HTML tag as the sizes and images are different)?
Here's what I have:
HTML:
<img src="http://www.floral-directory.com/flower.gif" class="image" />
CSS:
.image {
width: 250px;
}
.image:hover {
background: #000000;
}
The easiest way to do this is to wrap the img element in another, for example a span:
<span class="imgWrap">
<img src="http://www.floral-directory.com/flower.gif" class="image" />
</span>
And couple that to the CSS:
.imgWrap {
display: inline-block;
border: 1px solid #000;
}
.imgWrap:hover {
background-color: #000;
}
img:hover,
.imgWrap:hover img {
visibility: hidden;
}
JS Fiddle demo.
And, if you'd like to make it a little prettier, using transitions to fade in/out:
.imgWrap {
display: inline-block;
border: 1px solid #000;
background-color: #fff;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap img {
opacity: 1;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap:hover {
background-color: #000;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
img:hover,
.imgWrap:hover img {
opacity: 0;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.
The HTML
<div class="change_bg">
<img src="http://eofdreams.com/data_images/dreams/image/image-07.jpg" >
</div>
The CSS
.change_bg img{
max-width : 300px;
}
.change_bg{
width : 300px;
height : 300px;
float:left;
}
.change_bg img:hover{
visibility : hidden;
}
.change_bg:hover {
background : #bc7d89;
}
Live Example # http://cdpn.io/Bmthc