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>
Related
I created an underline that opacity goes in but doesn't go out when moving out the mouse on the element and I want the transition of it going out as well when I hover away.
.underline-hover-effect:after {
content: "";
position: absolute;
height: 2px;
opacity: 0;
bottom: -5px;
background-color: #6415ff;
transition: opacity 300ms ease;
}
.underline-hover-effect:hover::after {
width: 100%;
left: 0;
opacity: 1;
}
This just results of transitioning in the opacity but not transitioning out
The width collapses to zero when you're not hovered because you've declared it only in the hover state.
Move the left and width rules into the non-hovered selector so it's always the same size and in the same place.
.underline-hover-effect {
position: relative;
}
.underline-hover-effect::after {
content: "";
position: absolute;
height: 2px;
opacity: 0;
bottom: -5px;
background-color: #6415ff;
transition: opacity 300ms ease;
width: 100%;
left: 0;
}
.underline-hover-effect:hover::after {
opacity: 1;
}
<div class="underline-hover-effect">hello</div>
I am trying to make my div fade in and out with only css. Could someone please help me.
.overlay {
display: none;
}
.image:hover .overlay {
box-sizing: border-box;
display: block;
height: 100%;
left: 0;
-moz-box-sizing: border-box;
position: absolute;
top: 0;
-webkit-box-sizing: border-box;
width: 100%;
}
I would suggest using the opacity property that can be animated with transition.
Try the following:
#container {
position: relative;
width: 50px;
height: 50px;
}
img {
width: 100%;
height: 100%;
background-color: black;
}
.overlay {
position: absolute;
background-color: blue;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out; /* for compatibility with older versions of Opera */
-ms-transition: opacity 1s ease-in-out; /* for compatibility with IE and Edge */
-moz-transition: opacity 1s ease-in-out; /* for compatibility with Firefox */
-webkit-transition: opacity 1s ease-in-out; /* for compatibility with Chrome, Safari... */
}
#container:hover>.overlay {
opacity: 1;
}
<p>Try hovering over the image:</p>
<div id="container">
<img>
<div class="overlay"></div>
</div>
Note: <img> is a self-contained tag. That is, it cannot contain elements.
You will need a wrapping div as shown in the example with a container that contains both your image and the overlay.
I hope this helps.
I'am trying to set css transition on the text on hover image like this -> https://victorthemes.com/themes/glazov/portfolio-grid/
I tried to do this with cubic-bezier() function, but without result.
Here's my code.
* {
margin: 0;
padding: 0;
border: 0;
}
.img__wrap {
position: relative;
height: 200px;
width: 257px;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description {
visibility: visible;
opacity: 1;
}
<div class="img__wrap">
<img class="img__img" src="http://placehold.it/257x200.jpg" />
<p class="img__description">Teext.</p>
</div>
Please give me some hints how to do this.
To darken the image, you need to change the opacity of it. To zoom the image, use a scale transform and to move the caption text, you need a translateX transform. Apply those css styles and their respective transitions (you need a transition in the image as well as in the text) and you're left with the following:
* {
margin: 0;
padding: 0;
border: 0;
}
.img__wrap {
position: relative;
background: black;
height: 200px;
width: 257px;
overflow: hidden;
}
.img__img {
opacity: 1;
transition: all 0.2s;
}
.img__description {
position: absolute;
color: #fff;
transition: all .2s;
left: 15px;
right: 0;
bottom: 15px;
transform: translateX(-100%);
}
.img__wrap:hover .img__img {
opacity: 0.5;
transform: scale(1.2);
}
.img__wrap:hover .img__description {
transform: translateX(0);
}
<div class="img__wrap">
<img class="img__img" src="http://placehold.it/257x200.jpg" />
<p class="img__description">Teext.</p>
</div>
I used transform: translate(); to move object. Play with cubic-bezier here to achieve perfect animation. But I used the same which was on the website you posted in example.
Also I removed opacity, visibility
* {
margin: 0;
padding: 0;
border: 0;
}
.img__wrap {
position: relative;
height: 200px;
width: 257px;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
transform: translateX(-100%);
transition: all 600ms cubic-bezier(0.645, 0.045, 0.095, 1.08);
}
.img__wrap:hover .img__description {
transform: translate(0);
}
<div class="img__wrap">
<img class="img__img" src="http://placehold.it/257x200.jpg" />
<p class="img__description">Teext.</p>
</div>
Ok, first, I would suggest using "all" for the transition element instead of defining the same values for all of the proprieties you want to transition.
transition: all .2s;
Second, let's get the bezier right. I think this is close enough:
cubic-bezier(1.000, 0.215, 0.355, 0.990)
So the transition propriety should look like this:
transition: all .2s cubic-bezier(1.000, 0.215, 0.355, 0.990);
For the text animation I suggest using animate.css and use fadeInLeft.
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.