I have applied:
-webkit-transition:background-image 0.4s ease-in-out;
background-image: url('http://www.clementinekeithroach.co.uk/wpcontent/uploads/2013/09/about.jpg');
background-position:initial initial;
background-repeat:initial initial;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
clear:both;
color:#DDDDDD;
cursor:pointer;
display:block;
font-size:1.8rem;
height:80px;
line-height:80px;
margin:2em auto 0;
text-align:center;
transition:background-image 0.4s ease-in-out;
width:80px;
}
To the "about" image on:
http://www.clementinekeithroach.co.uk/home/
However, unlike all the other images on the site, which fade naturally, and then increase in their darkness when hovered over, this one refused to budge.
Can someone explain where I've gone wrong?
replace your that holds the background for "about" with this code:
remember to remove the background-image attribute from the span's css. Also remove filter and opacity from the span to make this work.
<span class="sidebar-link">
<img src="http://www.clementinekeithroach.co.uk/wp-content/uploads/2013/09/about.jpg" id="myimg">
<style>
#myimg{
height: 100%;
opacity: 0.6;
transition: all 0.3s ease-in-out 0s;
width: 100%;
z-index: 1;
}
#myimg:hover{
height: 100%;
opacity: 1;
transition: all 0.3s ease-in-out 0s;
width: 100%;
z-index: 1;
}
</style>
</span>
Related
super beginner here. I'm trying to get an image caption to show on hover so I've set the opacity to 0 on the .caption class then 100% on the .caption:hover (not sure if this is best practice but it's the only way i could get it to work...)
Anyway, I'm now trying to get the caption to ease in & out on hover. I've tried adding transition: 0.5s ease-in-out; to both the .caption and the .caption:hover class. Adding it to the .caption:hover class makes it so it only eases in (then jumps straight back to its original state when i move my cursor away). Adding it to the .caption class works, however the caption shows briefly when I reload the page as well as when I hover over the image. I only want it to show on hover.
Any help would be appreciated!
CSS
.caption {
opacity: 0%;
position: absolute;
top: 20px;
left: 20px;
width: 318px;
height: 318px;
background: white;
transition: 0.5s ease-in-out;
}
.caption:hover {
opacity: 100%;
}
HTML
<div class="caption">
<h2 class="artname">Caption 1</h2>
<h3 class="artcategory">Caption2</h3>
</div>
p {
width: 100px;
height: 100px;
background: red;
opacity:0;
transition: opacity 2s;
transition-timing-function: ease-in-out;
visibility:hidden;
}
div:hover > p {
opacity:1;
visibility:visible;
}
div{
height:100px;
}
<div>
<p></p>
</div>
http://jasperalani.com/
If you hover over the logo at the bottom left of the page it becomes super pixelated when you hover over it.
I am using
transform: rotate(360deg);
How can I fix this so it maintains its quality?
That's because you are making you image to transform:rotate(360deg);, instead of that target you parent element .socialmedia and try it works.
.socialmedia {
position: fixed;
bottom: 0;
right: 1;
width:21px;
height:21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
img{
width: 100%;
height: 100%;
}
.socialmedia:hover{
transform:rotate(360deg);
}
.socialmedia {
position: fixed;
bottom: 0;
right: 1;
width:21px;
height:21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
img{
width: 100%;
height: 100%;
}
.socialmedia:hover{
transform:rotate(360deg);
}
<div class="socialmedia">
<a href="https://ello.co/jasperalani">
<img id="ello" src="http://jasperalani.com/images/ello_icon.png">
</a>
</div>
This is a known problem on Google Chrome.
Usually, you can overcome the problem by adding -webkit-backface-visibility: hidden to your element you rotate. In your example it will remove the anti aliasing entirely, though.
This is, because you are using transition instead of transform, so to fix the problem you rather add outline: 1px solid transparent to the CSS of your image. This will solve the problem.
img {
width: 21px;
height: 21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
outline: 1px solid transparent;
}
img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
<img id="ello" src="http://jasperalani.com/images/ello_icon.png">
I provide a JSFiddle: https://jsfiddle.net/om83Ljtm/
It contains of a div, img, and span element. The img acts as a background-image to the div. I do not use CSS background-property for the background-image because I want to change the opacity when hovering the div. The span contains text which overlaps the background image. When hovering the div, I want to change the opacity of the image. This works, however, when the mouse hovers the text (span), the opacity of the img changes back to the initial value 0.6. But I want the image to not (!) change back its opacity when I hover over the text. How can this be achieved?
To sum up: In the JSFiddle, if I hover over the div, the opacity changes to 1. This should remain, even if I hover over the text in the span. This does not work, yet.
Use .event:hover img instead of .event img:hover
.event {
width: 200px;
position: relative;
border: 1px solid #dddddd;
height: auto;
}
.event .titel {
float:left;
font-size: 20px;
background-color:white;
padding:3px;
position:absolute;
top:50px;
left:5px;
}
.event img {
opacity: 0.6;
width: 100%;
}
.event img {
-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;
}
.event:hover img {
opacity: 1;
}
<div class="event">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
<span class="titel">text text text text text text text text text </span>
</div>
you can achieve this by giving hover to div not on img here you go: https://jsfiddle.net/om83Ljtm/2/
.event:hover img {
opacity: 1;
}
Just like this ;)
.event {
width: 200px;
position: relative;
border: 1px solid #dddddd;
height: auto;
}
.event .titel {
float:left;
font-size: 20px;
background-color:white;
padding:3px;
position:absolute;
top:50px;
left:5px;
}
.event img {
opacity: 0.6;
width: 100%;
}
.event img {
-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;
}
.event:hover img { /* Just change this */
opacity: 1;
}
<div class="event">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
<span class="titel">text text text text text text text text text </span>
</div>
I added a white background to show where it is. How do I remove that extra 3px? I don't want to set the height to a specific amount because I want it to be proportional and scale (max is 400x250px). Currently the height is 253px, I want it to be the image size which is 250px.
jsFiddle: http://jsfiddle.net/e2odqw5u/
HTML:
<div class="portfolio">
<figure class="entry">
<img src="http://www.robertfikesiv.com/images/Gallery/Graphic/thumb/Bad-Panda2.jpg"/>
<div class="hover">TEST</div>
</figure>
</div>
CSS:
body{
background: #000;
}
.portfolio{
padding: 0px 10px 0px;
margin: auto;
max-width: 1600px;
overflow: hidden;
}
.figure{
margin: 0px;
padding: 0px;
}
.entry{
position:relative;
float:left;
cursor: pointer;
background: #fff;
padding: 0px;
margin: 0px;
max-width: 400px;
}
.hover {
background:rgba(0,0,0,.9) ;
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
opacity:0;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-ms-transition:all .2s ease-out;
-o-transition:all .2s ease-out;
transition:all .2s ease-out;
}
.entry:hover .hover{
opacity: 1;
}
figure > div {
padding-top:25%;
text-align: center;
color:#fff;
}
You image is inline. Hence it is aligned with the baseline. Hence the white space. Of the many ways to kill that space are:
vertical-align:middle your image. Fiddle: http://jsfiddle.net/abhitalks/e2odqw5u/10/
display: block your image. Fiddle: http://jsfiddle.net/abhitalks/e2odqw5u/11/
font-size: 0px; on your figure and font-size: npx on your div. Fiddle: http://jsfiddle.net/abhitalks/e2odqw5u/12/
just add display: block to the img:
.entry img{
display: block;
}
FIDDLE
I currently have a rotating image that flips around and has writing on the back using animated css, however what I want is that when the image flips around it changes with another image so it has a solid colour instead of a reversed version of the image.
CSS
.hover-img {
position: relative;
width: 400px;
height: 300px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background:url(bbclike/topright.png);
-webkit-transform:rotateY(180deg);
-webkit-transform-style: preserve-3d;
line-height:200px;
text-align:center;
font-size:0;
}
.hover-img:hover{
-webkit-transform:rotateY(0deg);
font-size:14px;
color:white;
background-color:#FF0;
}
HTML
<div class="hover-img">
Text Goes Here
</div>
Just put in hover section whatever you want when user hovers the div... E.g. :
.hover-img:hover{
background:url(---HERE IMAGE 2---);
font-size:14px;
color:white;
background-color:#FF0;
}
Working fiddle demo here
you may want to try this out
http://jsbin.com/tejiduq/1/edit?html,css,output
change the container class, so that you can manipulate DOM class.
//html
<div>
<i class="icon"></i>
</div>
<br>
<input class="button" type="button" value="flip">
//css
div{
}
.icon {
display: inline-block;
width: 30px;
height: 30px;
transition: all 0.5s;
}
div .icon {
background: url("https://www.w3schools.com/images/compatible_chrome.gif") no-repeat;
}
div.ie .icon{
background: url("https://www.w3schools.com/images/compatible_edge.gif") no-repeat;
transform: scaleX(-1)
}
//javascript
$(".button").click(function() {
$("div").toggleClass("ie");
});
Hope this will find you useful.