What I am trying to achieve is an animation when you hover an element like this:
#import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
.home:hover::after{
content: " Home";
}
<i class="fa fa-home"></i>
So when you hover the a, some additional text will be display, but I couldn't find any transition for smooth showing it. Don't mind answering to use transition: all ..., because this isn't working. Live example of the website can be found at http://www.testingc.ga or in the snippet below.
iframe snippet (Open the navigation to see the elements with the content: "Text" on hover.
iframe{
border: none;
width: 100vw;
height: 100vh;
}
<iframe src="https://www.tc.gamingprouk.net">Error</iframe>
Any help would be welcome!
Something like this?
I made a fade-in / fade-out effect with a CSS transition
.home {
position: relative;
}
.home::after {
content: 'Home';
transition: opacity 0.5s;
opacity: 0;
pointer-events: none;
position: absolute;
margin-left: 10px;
}
.home:hover::after {
opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<i class="fa fa-home"></i>
You could set the original state first then animate it on hover
a:after {
content: 'Home';
opacity: 0;
transition: opacity: 0.5s linear;
}
a:hover:after {
opacity: 1;
}
Related
How do I make my LinkedIn badge transition smoothly fade in and out?
I know the basics of Web Developing and I have been using and learning HTML and CSS on visual studio code for 3 or 4 days, recently I was creating a personal website which is still in the making and I came across a confusion in which the transition command of CSS is not working for me I don't know why I want the LinkedIn badge to Fade in and Fade out in approximately 2 or 3 seconds smoothly but it is not letting me.
This is the Code: https://jsfiddle.net/JadeDoe/1jvs6rhy/9/
CSS :
.badge-base {
display: none;
position: absolute;
top: 24px;
left: 16%;
transition: 1s;
}
.Heading:hover+.badge-base {
display: inline;
}
.Heading:hover .badge-base,
.badge-base:hover {
display: block;
}
You can't transtion display none to block. You can however do it using opacity (although it's not the exact thing because the element would still take up space)
.badge-base {
position: absolute;
top: 24px;
left: 40%;
transition: 1s;
opacity: 0;
pointer-events: none;
}
.Heading:hover+.badge-base {
display: inline;
opacity: 1;
pointer-events: all;
}
.Heading:hover .badge-base,
.badge-base:hover {
display: inline;
opacity: 1;
pointer-events: all;
}
<body>
<div>
<h1 class="Heading">Jane D Walker</h1>
<div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="dark" data-type="VERTICAL" data-vanity="g-mail-assistance-704528251" data-version="v1">
<a class="badge-base__link LI-simple-link" href="https://pk.linkedin.com/in/g-mail-assistance-704528251?trk=profile-badge"></a>
</div>
</div>
<script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>
</body>
I cannot figure out why this breaks it. I have an a element which uses CSS transitions to fade into a gradient background on hover. For whatever reason whenever I set the text color on hover to white the transition breaks?
.social-item {
margin-left: 0.25vw;
padding: 0.1vw;
transition: 0.2s;
color: white;
}
.social-item:hover {
background: linear-gradient(to left, #8E2DE2, #DC0486);
color: white;
}
<i class="fab fa-keybase"></i> Keybase
I'm also using Bulma and Font Awesome.
You can't simply make transitions with background gradients.
Animatable CSS Properties
Use pseudo-element and do an opacity transform.
.social-item {
position: relative;
color: white;
z-index: 1;
}
.social-item::before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to left, #8e2de2, #dc0486);
z-index: -1;
transition: opacity 0.5s linear;
opacity: 0;
}
.social-item:hover::before {
opacity: 1;
}
<i class="fab fa-keybase"></i> Keybase
A nice article about this.
Thank you!
What I figured your problem to be is that you're trying to do gradient transition. It is not supported. But if you want to simulate it, you can use the opacity property in css. Add opacity: 0 to the main element (.social-item) and opacity: 1 to the hover state (.social-events:hover). Hence the transition: 0.2 will apply on the opacity, as it is supported, thus simulating the desired outcome.
Thus the final css, shall be.
.social-item {
margin-left: 0.25vw;
padding: 0.1vw;
transition: 0.2s;
color: white;
opacity:0;
}
.social-item:hover {
background: linear-gradient(to left, #8E2DE2, #DC0486);
color: white;
opacity: 1;
}
If you actually want to have the thing display normally, and not just on hover, then opacity: 0 wont work for you. You have to use the pseudo-selector :after to add a dummy element to the main class and work all the transitions and background gradient stuff on that. Here is a codepen example.
working on my new homepage, in wordpress but using the html editor because wordpress themes slow my site down like all hec. I'm nearly ready to go, just wondering how I accomplish the following:
On my staging page here you can see
Another image appears in front of it. I want that image to fade out after the mouse moves off the image.
Here's my code that got it going:
<div class="imageBox">
<div class="imageInn">
<img src="https://pausethemoment.photography/wp-content/uploads/2017/07/Melbourne-Wedding-Photography-Pause-The-Moment-Beach-Wedding-Photography-610x345.jpg" alt="Sandringham Melbourne Wedding Photography - Sun sets on couple on a beach.">
</div>
<div class="hoverImg">
<img src="https://pausethemoment.photography/wp-content/uploads/2017/07/Wedding-Photography-Melbourne-Limited-Dates-Overlay.png" alt="Pause The Moment Melbourne Wedding Photography" width="610" height="345" class="aligncenter size-full wp-image-14308" />
</div>
</div>
And then this CSS:
.imageBox
{
position: relative;
float: left;
}
.imageBox .hoverImg {
visibility:hidden;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.imageBox:hover .hoverImg {
display: block;
visibility: visible;
opacity: 1;
}
Have tried using the ::after tag on
.imageBox .hoverimage
in various formats like this:
.imageBox:hover::after .hoverImg
{
visibility:visible;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
but to no avail. Have also played around with animation delays etc, but can't seem to get it to stay on there! Tried webkit transitions but I couldn't even get them to fade it in. Any help greatly appreciated!
The problem seems to be with using the visibility property. CSS transition doesn't know how to generate intermediate values between "visible" and "hidden" because those values are not numeric.
Try removing all occurrences of visibility and applying the transition to opacity only.
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
/*visibility:hidden;*/
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: /*visibility 0s,*/ opacity 0.5s linear;
}
.imageBox:hover .hoverImg {
display: block;
/*visibility: visible;*/
opacity: 1;
}
I need an element to appear where another was, let's say on hover for the sake of an example. And I need to use CSS animations to make its transition smoother. So I can't use display property. And instead, I have to use this, right?
div {
visibility: hidden;
opacity: 0;
}
But my elements need to overlap, as in where one was, the other has to show instead. With display, that was pretty easy, but with this, I have no clue how to do this without making it too messy.
Can someone help me out? Here's the basic outline of my code:
.first-outline .first:hover {
visibility: hidden;
opacity: 0;
}
.first-outline .second {
visibility: hidden;
opacity: 0;
}
.first-outline:hover second {
visibility: initial;
opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item first-outline">
<p class="first">First</p>
<p class="second">Second</p>
</li>
<!-- Or something like this, but it still doesn't work -->
<li class="list-group-item second-outline">
<span class="first">First</span>
<span class="second">Second</span>
</li>
Thank you.
Give the container a positon: relative and the inner divs positin: absolute then play with the hover states and opacity.
add transition property for smooth effect
.first-outline {
position:relative;
}
.first-outline .first, .first-outline .second {
position: absolute;
top: 0 ;
left: 0;
width: 100%;
height: 100%;
transition: opacity 500ms linear;
-webkit-transition: opacity 500ms linear;
-moz-transition: opacity 500ms linear;
}
.first-outline:hover .first, .first-outline .second {
opacity: 0;
}
.first-outline:hover .second {
opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item first-outline">
<p class="first">First</p>
<p class="second">Second</p>
</li>
I have some divs that appear when you hover an image. However, I want to have a transition rather than the images appearing so abruptly. I'm trying to avoid javascript if possible.
img {
display: none
}
p.one:hover + img {
display: block;
}
p.two:hover img {
display: block;
}
http://jsfiddle.net/nmeyf03r/56/
Transitions don't work with display: none. You can't fade in an element that's been removed from the page. Similarly, you can't fade out a display: block element. With display, the element is either in or out.
However, you can still transition your divs with CSS using the visibility, opacity and height properties.
HTML
<p class="one">HOVER OVER ME - IMG IS SIBLING</p>
<img src="http://www.placecage.com/100/100">
<p class="two">HOVER OVER ME -IMG IS CHILD</p>
<img src="http://www.placecage.com/100/100">
CSS
img {
visibility: hidden;
opacity: 0;
height: 0;
transition: height .5s linear, opacity .5s linear;
}
p.one:hover + img {
visibility: visible;
opacity: 1;
height: 100px;
transition-delay: 0s;
}
p.two:hover + img {
visibility: visible;
opacity: 1;
height: 100px;
transition-delay: 0s;
}
Here's your demo, updated with the code above:
http://jsfiddle.net/nmeyf03r/58/