Applying a transition to a span with in a div on hover
Tag : html , By : Joshua Johnson
Date : March 29 2020, 07:55 AM
will help you Display isn't a supported property for transitions. You can however use opacity for this: span {
position: relative;
bottom: 1.4em;
display: block;
color: white;
background: black;
text-align: center;
/* display:none;*/
opacity: 0;
-webkit-transition: all 1.25s ease-out;
-moz-transition: all 1.25s ease-out;
transition: all 1.25s ease-out;
}
div:hover span {
opacity: 1;
/*display: block;*/
}
|
Different CSS transition-delays for hover and mouseout for a span element in a div?
Tag : html , By : vitorcoliveira
Date : March 29 2020, 07:55 AM
help you fix your problem it is pretty easy just set the transition delay to 0s in normal state div > span (means when your transition return from hover state to normal state the delay should be 0 which will make the text disappear quicker) Note: I have added a transition delay property to div > span and its value is 0s and it is the key to fade the text quicker when you mouse out div {
font-size: 72px;
margin-top: 50px;
transition-delay
}
section {
display: table; margin: 0 auto;
}
.boots {
width: 50px;
background-color: grey;
transition: width 1s;
display: inline-block;
}
.laugh {
width: 50px;
background-color: red;
transition: width 1s;
display: inline-block;
}
.awesome {
width: 54px;
background-color: orange;
transition: width 1s;
display: inline-block;
}
.happy {
width: 52px;
background-color: green;
transition: width 1s;
display: inline-block;
}
div > span {
position: absolute;
display: inline;
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
transition-delay:0s;
}
div:hover > span {
position: absolute;
display: inline;
visibility:visible;
opacity:1;
transition-delay:0.5s;
}
.boots:hover {
width: 170px;
}
.laugh:hover {
width: 190px;
}
.awesome:hover {
width: 290px;
}
.happy:hover {
width: 195px;
}
<section>
<div class = "boots">B<span>oots</span></div>
<div class = "laugh">L<span>augh</span></div>
<div class = "awesome">A<span>wesome</span></div>
<div class = "happy">H<span>appy</span></div>
</section>
|
How to retain image round corners during transition of image hover zoom in?
Date : March 29 2020, 07:55 AM
will help you DEMO , try add this: .img-wrapper {
border-radius: 10px;
position:relative;
z-index:1;
}
|
Image transition on hover
Tag : html , By : Epora75
Date : March 29 2020, 07:55 AM
may help you . As other answers pointed out, you were missing a display: inline-block, but the problem was in .extra-box-icon I have also added the transform for the image: (See the beginning of the CSS) .extra-box-icon {
display: inline-block;
}
img {
transition: transform 1s;
}
.extra-box:hover img {
transform: translateX(-100px);
}
#extra {
margin: 25px auto;
width: 460px;
height: auto;
}
.extra-box {
position: relative;
width: 40%;
padding: 8px;
border-radius: 3px;
/*border: 1px solid #739BAF;*/
border: 2px solid black;
display: inline-block;
background: none;
transition: 0.5s ease;
}
.extra-box:hover {
border: 2px solid red;
transition: 0.5s ease;
}
.extra-box:first-child {
margin-left: 0;
width: 40%;
margin-right: 10%;
}
.extra-box:last-child {
width: 40%;
}
.extra-box a {
text-decoration: none;
}
.extra-box-text {
color: black;
font-size: 1em;
display: inline-block;
width: auto;
}
.extra-box-icon img {
padding-left: 5px;
width: 15px;
height: auto;
display: inline-block;
-webkit-transition: all .5 ease-in-out;
transition: all .5 ease-in-out;
/*transform: translateX(30px);
-webkit-transform: translateX(30px);*/
}
<div id="extra">
<div class="extra-box">
<a href="contact">
<div class="extra-box-text">Need help?
<br>Contact Us Now</div>
<div class="extra-box-icon">
<img src="icons/right-arrow.png">
</div>
</a>
</div>
<div class="extra-box">
<a href="register">
<div class="extra-box-text">Need an account?
<br>Register Now</div>
</a>
</div>
</div>
|
How to prevent image resizing during CSS image transition on hover in grid layout
Tag : html , By : Chris Tattum
Date : March 29 2020, 07:55 AM
wish helps you I want to have an image that transitions to another image when hovered on. I have currently have working code to do this, except that the top image is automatically rescaled to a larger size initially, so when the top image transitions from opaque 1 to 0, the image looks like it has "moved" since it is a different size than the bottom image. I have confirmed that both the top and bottom images are the same dimensions. , Keep height auto as mentioned below and try .projects-tile-picture {
width: 100%;
height: auto;
object-fit: cover;
}
|
Boards Message :
Related QUESTIONS :