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.
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>
I'm simply trying to add a button on hover but I'm stuck...
Is it possible to achive this only with CSS?? I'm using bootstrap if it helps
.card-img-top {
-webkit-filter: brightness(100%);
}
.card-img-top:hover {
-webkit-filter: brightness(40%);
-webkit-transition: all .15s ease-in-out
-moz-transition: all .15s ease-in-out
-o-transition: all .15s ease-in-out
-ms-transition: all .15s ease-in-out
transition: all .15s ease-in-out
}
<img class="card-img-top" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
Yes, this is possible with CSS only. You could do it with a separate element with all the content in it (.overlay). This element is shown when there is a hover over the image-wrapper. I've used opacity and visibility together, so that a transition is possible (visibility, because opacity: 0 is still clickable).
Darkening the image can be done with a background color which is semi-transparent (rgba()). I've then positioned the wrapper of the two button elements inside the image with position absolute 50% and then moved it back half the height and width to make it appear exactly in the middle of the image. This can of course also be done with flexbox.
The two yellow buttons inside the button-wrapper are positioned next to each other with display: inline-block. If you do it like this, a line break is often added but can be removed by using white-space: nowrap.
.wrapper {
display: inline-block;
position: relative;
}
.wrapper:hover .overlay {
opacity: 1;
visibility: visible;
}
.overlay {
opacity: 0;
visibility: hidden;
transition: 0.3s ease all;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
}
.overlay .button-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
}
.overlay .button {
width: 50px;
height: 50px;
display: inline-block;
background: yellow;
margin: 20px;
border-radius: 100px;
}
.image {
max-width: 350px;
max-height: 350px;
}
<div class="wrapper">
<img class="image" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
<div class="overlay">
<div class="button-wrapper">
<div class="button"></div>
<div class="button"></div>
</div>
</div>
</div>
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'm trying to create an effect where:
The cursor hovers over a box
The bar slides out
As the sliding motion eases out a title appears
The cursor leaves the box
The title begins to disappear as the bar slides back
The bar finishes sliding back
But instead when the cursor leaves the box the delay is invoked again so the title fades out as the bar finishes it's transition back which looks ugly. How can I achieve the desired effect?
HTML:
<div class="slidingbar">
<h1 class="slidingbar-content" id="title">My Awesome Web App</h1>
</div>
CSS:
.slidingbar{
width: 50px;
height: 50px;
transition: width 2s;
-webkit-transition: width 2s;
}
.slidingbar .slidingbar-content{
margin: 0px;
opacity: 0;
white-space: nowrap;
overflow: hidden;
transition: opacity 1s 1s;
-webkit-transition: opacity 1s 1s;
}
.slidingbar:hover{
width: 100%;
}
.slidingbar:hover .slidingbar-content{
opacity: 1;
}
You can set different transitions in the base state and in the hover state.
In this case, the delay should be only in the hover state, and the base state should be un-delayed.
.slidingbar .slidingbar-content{
margin: 0px;
opacity: 0;
white-space: nowrap;
overflow: hidden;
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.5s;
-webkit-transition-delay: 0s;
-webkit-transition-timing-function: linear;
transition-property: opacity;
transition-duration: 0.5s;
transition-delay: 0s;
transition-timing-function: linear;
}
.slidingbar:hover .slidingbar-content{
opacity: 1;
transition-delay: 1.5s;
-webkit-transition-delay: 1.5s;
}
demo
If i understood the instructions, try applying the transition on the same element... like this
HTML
<div class="slidingbar">
<h1 class="slidingbar-content" id="title">My Awesome Web App</h1>
</div>
CSS
.slidingbar{
border: 1px solid #cccccc;
height: 50px;
}
.slidingbar-content{
width: 50px;
margin: 0px;
white-space: nowrap;
overflow: hidden;
opacity: 0;
transition: opacity 1.5s, width 2s ;
-webkit-transition: opacity 1.5s, width 2s;
}
.slidingbar-content:hover{
width: 100%;
opacity: 1;
}
Hope it help you
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.