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>
Related
I've coded it in css where if you hover over a div it expands and show more details about the div, the issue is that whenever I remove the mouse some of the color is still left as lines, I'll attach a picture.
This is the css code where movie card is the details and movie is the div to hover on
.movie-card{
transition: 500ms ease-in-out;
background-color: #a851ff;
opacity: 0;
visibility: hidden;
border: 1px solid #a851ff;
}
.movie-box-content:hover .movie-card{
transition-delay: 250ms;
transition-duration: 500ms;
visibility: visible;
opacity: 1;
}
This is the result of hovering over:
And this is after removing the mouse over it:
its worth noting that after I scroll once, all the lines get removed.
Removing the transition: 500ms ease-in-out; from the movie-card class gets rid of the spurious 'shadows'.
.movie-box {
position: relative;
display: block;
width: 300px;
height: 168.75px;
}
.movie-box-content {
transform: scale(1);
transition: 500ms ease-in-out;
background-image: url('https://wallpaperaccess.com/full/1508305.jpg');
background-repeat: no-repeat;
background-size: 300px 168.75px;
width: 100%;
height: 100%;
rborder-radius: 2%;
}
.movie-box-content:hover {
transition-delay: 250ms;
transition-duration: 500ms;
transform: scale(1.3);
border: 1px solid #a851ff;
box-shadow: #a851ff;
}
.movie-card {
/* transition: 500ms ease-in-out;*/
background-color: #a851ff;
opacity: 0;
visibility: hidden;
}
.movie-box-content:hover .movie-card {
transition-delay: 250ms;
transition-duration: 500ms;
visibility: visible;
opacity: 1;
}
<div class="movie-box">
<div class="movie-box-content">
<div style="width: 100%; height: 100%;"></div>
<div class="movie-card hidden">
<div class="text-center">
<strong>Drama, psycho, crime</strong>
</div>
</div>
</div>
</div>
There is the question of whether this alters anything else visually.
Incidentally, changing scale(1.2) to scale(i) where i is an integer also seemed to remove the problem which perhaps indicates difficulty with mapping CSS pixels (which can take up several display pixels each) so that as the div scales down it 'leaves behind' parts of the CSS pixel. It would be good if someone could explain this phenomenon.
I don't think it's necessary to have both visibility and opacity change as they essentially achieve the same thing. As you have a general transition set on the class, perhaps the two are interfering with each other.
OK, so I am trying to make a logo that when hovered on a text box is revealed saying "If you see this icon on any of pages, click it to return to the index." - I've done this with no trouble, however, my problem is that when you hover where the text box would be (without it being revealed yet) it reveals itself. This is rather annoying as I am wanting the text box to show only when you hover over the logo, not when the hover where the text box would be. My code:
.logovAlign #hoverText {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
top: -100%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
}
.logovAlign:hover #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
<div class="logovAlign">
<img src="images/favicon.png" width="50" height="50" alt "Lighting Bolt Logo">
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>
.logoAlign:hover contains the #hoverText, suggesting a hover action take place on .logoAlign whenever #hoverText is hovered.
Instead you can achieve the same with detecting hover on the img. Then using the Adjacent Sibling Selector + to select #hoverText.
.logovAlign #hoverText {
background-color: rgba(255,255,255,0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
/*top: -100%;*/
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
}
.logovAlign img:hover + #hoverText {
opacity: 1;
transition: opacity 0.3s ease-in;
}
<div class="logovAlign">
<img src="http://via.placeholder.com/350x150" width="50" height="50" alt"Lighting Bolt Logo">
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>
I made a couple of changes in your code, in order to illustrate my solution:
I've changed the picture to a div, so it would be shown no matter what.
I've removed the top: -100%; property, which caused an error in the text's preview.
The actual solution was using the adjacent sibling call in CSS: +, which allows to put an hover listener on one element, while changing its sibling element's CSS properties.
In this case, the listener was added to the "red button", while changing the opacity of the text inside the p tag.
.logovAlign #hoverText {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
}
#button {
width: 50px;
height: 50px;
background-color: red;
}
#button:hover + #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
<div class="logovAlign">
<div id="button"></div>
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>
The issue is that opacity keep the pointer-events, so elements with opacity:0 can still be hovered and clicked on.
You need to either set pointer-events:none on your .logovAlign #hoverText, or add a switch from visiblity:hidden to visibility:visible, as elements with visibility hidden won't trigger pointer-events.
example with the issue (since the provided code doesn't really work)
.logovAlign{
display:inline-block;
}
.logovAlign #hoverText {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
}
.logovAlign #logo {
width: 30px; height: 30px;
background-color: lime;
display:inline-block;
}
.logovAlign:hover #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
<div class="logovAlign">
<div id="logo"></div>
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>
Fixed example
.logovAlign{
display:inline-block;
}
.logovAlign #hoverText {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
pointer-events:none;
}
.logovAlign #logo {
width: 50px; height: 50px;
display:inline-block;
background-color: lime;
}
.logovAlign:hover #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
<div class="logovAlign">
<div id="logo"></div>
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>
Now that we got rid of how this happens... a much better solution would be to use the logo as the hover element instead of the containing div, and use a sibling selector to actuate on the hover text.
Something like
#logo:hover + #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
This will help. I had used JavaScript instead of css.
var span = document.getElementById("text");
function a() {
span.style.visibility = "visible";
}
function b() {
span.style.visibility = "hidden";
}
<!DOCTYPE html>
<html>
<body>
<img src="https://i.stack.imgur.com/8ALM5.png" id="img1" class="img1" onmouseover="a();" onmouseout="b();"/>
<span class="text" id="text" style="visibility:hidden;">If you see this icon on any of pages, click it to return to the index.</span>
</body>
</html>
First, here is the page I'm referencing: https://hypemarketing.co.uk/portfolio/
I've been trying to figure out how the transition effect on these logos work in Chrome's inspect element console for hours. Essentially the logo transitions to underlying text upon hovering but when trying to recreate the effect using what I thought the mechanism properties were, z-index, transform, and transition, I couldn't get it to trigger. I've searched through MDN, W3Schools, and other Stack Overflow pages but couldn't find a clear explanation.
Can someone please explain to me how this effect works? Appreciate any help with this!
Note: I'm new to coding so forgive me if the answer to this is super simple.
Update: Thanks to a commenter below I learned how the effect works! However on trying it for myself I still couldn't get it to trigger. I found a similar answer on SO that mentioned visibility, but after inserting the code still didn't run. I'm not sure where the issue is. Here is my code: https://jsfiddle.net/eyd0jdap/
HTML:
<div class="container">
<img class="logo" src="http://www.pngall.com/wp-content/uploads/2016/06/Nike-Logo-Free-PNG-Image.png">
<p class="services"> This is sample text.
<br> And some more sample text.</p>
</div>
CSS:
.container {
position: relative;
background-color: lightblue;
display: block;
height: 300px;
width: 300px;
z-index: -10;
}
.logo {
height: 150px;
width: 150px;
z-index: 2;
padding-top: 80px;
padding-left: 80px;
visibility: visible;
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.logo:hover {
opacity: 0;
visibility: hidden;
}
.services {
position: absolute;
left: 25px;
top: 35%;
font-family: "times new roman";
font-size: 22px;
text-align: center;
z-index: 5;
opacity: 0;
visibility: hidden;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.services:hover {
opacity: 1;
visibility: visible;
}
There are a few problems with your implementation of this. Firstly you need to remove the z-index from your css as it is unnecessary and causes a few problems down the line. Now change the :hover event so it is dependant on the container not the text and logo. This means they will always fade out/in in sync with each other.
.container:hover > .logo{
opacity: 0;
}
.container:hover > .services{
opacity: 1;
}
The rest of the code remains the same.
Link to codepen: https://codepen.io/pixelshadow/pen/BmKOdP?editors=1100
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.
I'm making a div on top of the tweet (and also the Facebook like) button. I want it to move up as soon as I hover above the div (button) so you can actually press the real tweet button. I've tried the following.
HTML:
<div class="tweet-bttn">Tweet</div>
<div class="tweet-widget">
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
CSS:
.tweet-bttn{
position: relative;
top: -30px;
left: -10px;
display:block;
opacity: 1;
width: 80px;
padding: 10px 12px;
margin:0px;
z-index:3;}
.tweet-bttn:hover{
-webkit-animation-name: UpTweet;
-moz-animation-name: UpTweet;
-o-animation-name: UpTweet;
animation-name: UpTweet;
-webkit-animation-duration:.5s;
-moz-animation-duration:.5s;
animation-duration:.5s;
-webkit-transition: -webkit-transform 200ms ease-in-out;
-moz-transition: -moz-transform 200ms ease-in-out;
-o-transition: -o-transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;}
#-webkit-keyframes UpTweet {
0% {
-webkit-transform: translateY(0);
}
80% {
-webkit-transform: translateY(-55px);
}
90% {
-webkit-transform: translateY(-47px);
}
100% {
-webkit-transform: translateY(-50px);
}
... and all other browser pre-fixes.
}
I'm not sure what's going wrong. It looks like that as soon as I hover, it moves, but if I move the cursor one more pixel, it has to do a new calculation which causes the flickering.
I don't know why you need animations for this when you can simply achieve the above using transitions
The trick is to move the child element on parent hover
Demo
div {
margin: 100px;
position: relative;
border: 1px solid #aaa;
height: 30px;
}
div span {
position: absolute;
left: 0;
width: 100px;
background: #fff;
top: 0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
div span:nth-of-type(1) {
/* Just to be sure the element stays above the
content to be revealed */
z-index: 1;
}
div:hover span:nth-of-type(1) { /* Move span on parent hover */
top: -40px;
}
Explanation: Firstly we wrap span's inside a div element which is position: relative;
and later we use transition on span which will help us to smooth the flow of the animation, now we use position: absolute; with left: 0;, this will stack elements on one another, than we use z-index to make sure the first element overlays the second.
Now at last, we move the first span, we select that by using nth-of-type(1), which is nothing but first child of it's kind which is nested inside div, and we assign top: -40px; which will transit when the parent div is hovered.