I have this code when on text hover, image pops, but can's succeed with setting transition to it. When I hover the image pops instantly without any transition.
.link #img {
position: absolute;
top: -450%;
left: 25%;
display: none;
}
.link:hover #img {
display: block;
}
#img {
width: 160px;
transition: 0.2s linear;
}
Photography<img src="content/images/a.png" id="img">
try with this code
use visibility or opacity and remove top:-450% from css
.link #img {
position: absolute;
left: 25%;
visibility: hidden;
opacity: 0;
}
.link:hover #img {
visibility: visible;
opacity: 1;
}
#img {
width: 160px;
transition: 0.5s linear;
}
<a href="#" class="link">Photography<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg"
id="img"></a>
Use opacity or visibility instead of display.
.link #img {
position:absolute;
top:0;
left:150px;
opacity:0;
}
.link:hover #img {
opacity:1;
}
#img {
width:160px;
transition: 0.5s linear;
}
<a href="#" class="link">Photography<img src="https://dummyimage.com/200x200/000/fff"
id="img"></a
I am a little bit edit the code. Here is working version. Check it please.
Just for your knowledge - property display can't be affected by transition, because it has only two states: displayed and not displayed and no states in between, so transition is not working for this purpose.
Doog luck :)
#img {
position: absolute;
visibility: hidden;
opacity: 0;
width: 160px;
transition: all .3s ease;
}
.link:hover #img {
visibility: visible;
opacity: 1;
}
Photography<img src="https://lh4.googleusercontent.com/-OowXWkgMSHI/AAAAAAAAAAI/AAAAAAAAANE/rOf2DCA2AXo/photo.jpg" id="img">
Related
Been battling with getting my Submenu to show on hover, it works but as soon as I slide off the parent element '.dropdown-toggle', the Submenu disappears.
Been trying for hours to fix this, look at the code below and see if you can solve the issue please.
Much appreciated
.dropdown-menu {
position: absolute;
top: 40px;
border: none;
padding: 0;
border-radius: 0;
width: 200px;
background: #e8e8e8;
visibility:hidden;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:700ms ease;
-moz-transition:700ms ease;
-o-transition:700ms ease;
transition:700ms ease;
}
.dropdown-toggle:hover + .dropdown-menu, .dropdown-menu {
display: block;
visibility:visible;
opacity:1;
filter:alpha(opacity=100);
}
Just a few changes can solve this:
dropdown-toggle changed to dropdown-menu.(Parent changed)
.dropdown-menu {
position: absolute;
top: 33px; /* reduced the gap so that it wont dissapear while hovering on submenu*/
border: none;
padding: 0;
border-radius: 0;
width: 200px;
background: #e8e8e8;
visibility:hidden;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:700ms ease;
-moz-transition:700ms ease;
-o-transition:700ms ease;
transition:700ms ease;
}
.dropdown:hover .dropdown-menu {
display: block;
visibility:visible;
opacity:1;
filter:alpha(opacity=100);
}
You may try this CSS:
.dropdown-menu {
position: absolute;
border: none;
padding: 0;
border-radius: 0;
width: 200px;
background: #e8e8e8;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: 700ms ease;
-moz-transition: 700ms ease;
-o-transition: 700ms ease;
transition: 700ms ease;
margin-top: -5px;
padding-top: 5px;
}
.dropdown-toggle {
position: relative;
display: inline-block;
}
.dropdown-toggle:hover .dropdown-menu {
display: block;
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
}
HTML:
<div class="dropdown-toggle">
<a>Hover me</a>
<ul class="dropdown-menu">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/2204/
Thanks for your all your answers. This was the working solution below.
.dropdown-menu {
position: absolute;
top: 40px;
border: none;
padding: 0;
border-radius: 0;
width: 200px;
background: #e8e8e8;
visibility:hidden;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:700ms ease;
-moz-transition:700ms ease;
-o-transition:700ms ease;
transition:700ms ease;
}
.dropdown:hover .dropdown-menu, .dropdown-menu {
display: block;
visibility:visible;
opacity:1;
filter:alpha(opacity=100);
}
I'm trying to do a basic ease out transition on a panel with a background image. I'm wanting it to fade to background color on hover. I've tried using various transitions non of which are working. I've tried (which i thought would work):
transition:background-image 0.2s ease-in-out;
.panel {
width:200px;
height:200px;
background:#000 url("https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png") no-repeat center center / cover;
transition:background-image 0.2s ease-in-out;
}
.panel:hover {
background:#000;
transition:background-image 0.2s ease-in-out;
}
<div class="panel"></div>
You can use this code:
Demo is here: https://output.jsbin.com/yadiwoviwe
.panel {
position: relative;
background: rgba(0,0,0,0) url(https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png) no-repeat center center / cover;
width:200px;
height:200px;
transition: background-color 0.2s ease-in-out;
}
.panel:hover {
background-color: rgba(0,0,0,.5);
}
.panel:before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: inherit;
content: ' ';
}
Unfortunately, you can't do this in this way.
The reason is that you're trying to animate the background-image property - a property that isn't animatable.
Instead, you can use a cool little trick that uses a pseudo-element to create the background image instead:
.panel {
width: 200px;
height: 200px;
position: relative;
background: pink;
}
.panel::after {
content: "";
position: absolute;
pointer-events: none;
background: url(https://unsplash.it/200) center center no-repeat;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
will-change: opacity;
transition: opacity .1s ease-out;
}
.panel:hover::after {
opacity: 0.5;
}
<div class="panel"></div>
Inspired by this cool little article on CSSTricks
Alternatively, you can manipulate the opacity of the image.
.panel {
width: 200px;
height: 200px;
background: #000;
position: relative;
color: white;
text-align: center;
}
.panel:after {
content: "";
background-image: url('https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png');
background-size: 200px 200px;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
.panel:hover:after {
opacity: 0;
}
<div class="panel"><h1>Text</h1></div>
Outdated answer, transition with image working currently with CSS.
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
background-image instead of 'all' and you'll see.
So basically I added a picture over an element when I hovered over it, that works, but then I add:
transition: 0.2s;
And it doesn't transition, why is this? I want it to ease into the picture not just show up instantly.
Help would be appreciated.
If it's any help, I used content: url("image location"); to add the image.
If I understand what you need, this will be similar:
.picturehover {
background-color: #f0f0f0;
position: relative;
height: 200px;
width: 300px;
}
.picturehover:after {
background: transparent url(https://lorempixel.com/300/200) center center / cover no-repeat;
content: "";
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: opacity .4s ease-in-out;
}
.picturehover:hover:after {
opacity: 1;
}
<div class="picturehover">Some text</div>
i make like this
.box{
background:#333;
width:100px;
height:100px;
transition:0.2s linear;
}
.box:hover{
background:#ccc;
}
<div class="box"></div>
Here's the CodePen.
The square changes to a circle as expected when it slides to the right, but when it returns back to the left, it stays a circle instead of changing to a square.
Also, I can only click the <a> once. If I try to click multiple times, it doesn't work.
Trying to do this with only CSS (if possible).
body {
margin-top: 30px;
background: gainsboro;
}
.container {
margin: auto;
width: 100%;
}
.path {
position: relative;
overflow: hidden;
width: 100%;
height: 80px;
x-background: white;
}
#keyframes ani {
0% {
left: 0;
}
50% {
left: 95%;
}
100% {
left: 0;
}
}
.shape:target {
border-radius: 50%;
transition: all .7s ease-in-out;
animation-name: ani;
animation-duration: 2s;
animation-direction: alternate;
animation-fill-mode: none;
}
.shape {
position: absolute;
left: 0;
background-color: slateblue;
width: 80px;
height: 80px;
display: block;
border-radius: none;
transition: border-radius .4s ease-out;
}
<div class="container">
<div class="path">
<span id="elem" class="shape"></span>
</div>
</div>
The closest you can get with just CSS is this, as far as I know:
body {
margin-top: 30px;
background: gainsboro;
}
.container {
margin: auto;
width: 100%;
}
.path {
position: relative;
overflow: hidden;
width: 100%;
height: 80px;
x-background: white;
}
#keyframes ani {
0% {
left: 0;
}
50% {
left: 95%;
}
100% {
left: 0;
}
}
.path a:focus .shape {
border-radius: 50%;
transition: all .7s ease-in-out;
animation-name: ani;
animation-duration: 2s;
animation-direction: alternate;
animation-fill-mode: none;
}
.shape {
position: absolute;
left: 0;
background-color: slateblue;
width: 80px;
height: 80px;
display: block;
border-radius: none;
transition: border-radius .4s ease-out;
}
<div class="container">
<div class="path">
<span id="elem" class="shape"></span>
</div>
</div>
The problem before was triggering the state with :target:. This is tough to debug with sites like Codepen or other embedded editors, since you can't see the hash change. Basically, clicking the link would append #elem to the URL, apply the :target styles to .shape, and stay like that until the hash changes.
This solution uses :focus, which gets you closer to your goal, but not all the way. To repeat the animation, you need to defocus/blur the circle, then click it again.
I'm usually all for CSS-only effects, but I'm pretty sure you'll need Javascript for this. Something as simple as applying a class on click, waiting 2 seconds, then removing the class would accomplish the same effect more reliably.
I'm having problems with getting any form of transition on this hover. I want it to appear a little slower than just abruptly when hovering over it. So maybe just a delay? Or an ease? Anyway I can't seem to get any of these things to work.
.forum-image {
float: left;
width: 75%;
overflow: auto;
position: relative;
opacity: 1;
transition: opacity 0.3 ease-in;
-webkit-transition: opacity 0.3 ease-in;
background-color: #dcdcdc;
}
.forum-image:hover .descriptionbox {
visibility: visible;
}
.descriptionbox {
opacity: 0.8;
background-color: #FFF;
width: 100%;
height: 100%;
visibility: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
padding: 10px;
}
<div class="forum-image">
<img src="http://i.imgur.com/VwTgk9a.png">
<div class="descriptionbox">
Testtesttest
</div>
</div>
Instead of using "visibility:hidden" try changing just the opacity, like so:
.forum-image:hover .descriptionbox {
opacity: 0.8;
}
And then put the transition code on the description box:
.descriptionbox {
/* Other properties... */
padding: 10px;
opacity: 0; /* Start opacity at 0, changes when hovered... */
transition: opacity 0.3s ease-in;
}
Now the description box has the transition property, and when the image is hovered, the new opacity is applied (with the transition time set in the original class). Then that new opacity class is removed when the mouse exits the area.
Make sure you remove
visibility: hidden;
from the original code, or you'll never see anything! (This messed me up at first when i was trying to fix it)
Here is a JSfiddle for demonstration
.forum-image {
position: relative;
display: inline-block;
}
.descriptionbox {
position: absolute;
background: #ffffff;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;
}
.descriptionbox:hover {
opacity: 1;
}
<div class="forum-image">
<img src="http://i.imgur.com/VwTgk9a.png" />
<div class="descriptionbox">
Testtesttest
</div>
</div>