I'm just trying to make a paragraph that becomes visible when I hover over it. In HTML I just have a paragraph inside the body, and I've also tried it in a div in the body.My code in CSS is just
p{
position:absolute;
visibility:hidden;
}
p:hover p{
visibility:visible;
}
First of all you cannot put <p> elements inside another <p>, that might be the problem. You can use a <div> or any of these as the container.
<div><p>paragraph</p></div>
div p {}
div:hover p {}
You can do this pretty easily with the opacity element in css. Do note that there are vendor specific usages with opacity and transition.
.hover-vis {
filter: alpha(opacity=0);
opacity: 0;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out
}
.hover-vis:hover {
opacity: 1
}
<p class="hover-vis">I show up when hovered on</p>
<p>I'm normal</p>
Related
I've been trying to create the following: Showing an image and when hovering over it, on the image a score will show, which fades in. I'm almost there, except for the fading in part.
My CSS:
.profile-image10 {
opacity: 1;
}
.profile-image10:hover .overlay {
position: absolute;
width: 100%;
height: 100%;
left: 510px;
top: 8px;
z-index: 2;
background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
opacity: 0.1;
}
<div class="profile-image10">
<img src="https://www.w3schools.com/howto/img_fjords.jpg" />
<span class="overlay"></span>
</div>
I've created this fiddle:
https://jsfiddle.net/1wusom4m/
As you can see it currently fades out when hovering, which is the opposite of what I want. So of course the opacity is set the wrong way around, but if I set it to a low value in the .profile-image10 it affects the original image as well. I'm quite new to this, so have been experimenting a lot to get this far, but I'm stuck now. So how can I make it fade in the score when hovering over the image? Or am I approaching this all wrong?
Three things.
Don't depend all style properties for your overlay on :hover state. Only those you want to change on :hover of the image.
Always define the transition property for the original state. You can change the reverse transition by additionally specifying it on the :hover state.
You div is a block level element, which by default grabs as much horizontal space as available. Putting the :hover on the div results in the fade effect being triggered even if you hover right of the picture (which probably is unwanted).
.profile-image10 .overlay{
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
left: 585px;
top: 8px;
z-index: 2;
background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
.profile-image10 a:hover + .overlay {
opacity: 1;
}
<div class="profile-image10">
<img src="http://www.defilmkijker.com/wp-content/uploads/2018/01/Recensie-Three-Billboards-Outside-Ebbing-Missouri.jpg" class="alignnone size-full wp-image-19857 round" />
<span class="overlay"></span>
</div>
Fiddle: https://jsfiddle.net/1wusom4m/3/
I am creating a navigation bar and I am having issues getting the hover's background color to take place of the entire area I want it to be in. I want it to be the entire block of the list item as well as the padding I have created. Right now it is only changing the color of the link's title name.
I created a fiddle to show what is happening.
https://jsfiddle.net/aqdw7mh3/
I have tried adding width: 100%; to:
.spectator_nav li:hover ul {
display: block;
}
and
.spectator_nav li a:hover {
background-color: #282828;
-o-transition:color .4s ease-out, background .3s ease-in;
-ms-transition:color .4s ease-out, background .3s ease-in;
-moz-transition:color .4s ease-out, background .3s ease-in;
-webkit-transition:color .4s ease-out, background .3s ease-in;
/* ...and now for the proper property */
transition:color .4s ease-out, background .3s ease-in;
}
This did nothing to help my case. What am I missing?
Set a to the size of the block. This way, it will fill up the block and the background will too.
Removed/changed some things but hopefully this is what you're after: https://jsfiddle.net/aqdw7mh3/4/
This question already has an answer here:
Change Background-Color of div element Cross Fade in a Loop
(1 answer)
Closed 7 years ago.
hello guys i running a fade effect with css, works perfect, i want change the color when get the fade but i had no success.
the fade change color if i use without image, but if i using with i image does not work.
example:
i tried :
background-color: red;
but i had no success, anyway somebody know how can make the fade backgroundbe a different color? right now just going to white, its possible do another color?
right now i have a image and whe i hover the mouse appear a fade white effect, i just wanna change the white to red.
php:
<img id="slide-img-1" src="<?php echo get_bloginfo('template_directory');?>/public/images/get_.jpg" class="slide fade " alt="" />
css:
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
Here's a Fiddle that overlays a background: red; over a div containing your image of choice.
HTML
<div class="box fade"><img src="http://placehold.it/350x150"></div>
CSS
.box {
width:350px;
height:150px;
}
.fade {
position: relative;
}
.fade:after {
background-color: red;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover:after {
opacity: .5;
}
I have a DIV that's wrapped in an anchor tag; all of the DIV is clickable, even the whitespace that doesn't contain any text (and this is desired, for my purposes).
I have another anchor tag that's absolutely positioned over this DIV with a higher z-index. This anchor tag wraps an image (a "close" icon).
This all works correctly, EXCEPT that I only want the close icon to appear on hover. As currently implemented, the close icon is always visible. I'm not sure if I'm going about this the right way. As a further wrinkle, I need to implement this without using JavaScript, since I'm running on an embedded system and I can't afford to invoke a JavaScript engine.
This only needs to work with WebKit (even more specifically, it only needs to work with Chrome).
Can someone give me a nudge in the right direction?
Here's the CSS I'm using:
.content {
border-top: 1px solid #eff1f2;
border-bottom: 1px solid #c5c5c5;
padding: 8px 11px;
border-left: 1px solid #c5c5c5;
}
div.content:hover {
background-color: #d1d6de;
}
.close {
position: absolute;
right: 100px;
top: 10px;
z-index: 0;
}
Here's my HTML:
<div>
<a href="native://action1/">
<div class="content">
<p>This is my content</p>
</div>
</a>
<a href="native://action2/">
<img class="close" src="images/close.png"/>
</a>
</div>
Here's a jsFiddle that contains my source.
All you need, given your current HTML, is a simple revision of your CSS:
.close {
display: none; /* Added this to hide the element */
/* other CSS */
}
div:hover a .close { /* to make the element visible while hovering the parent div */
display: block;
}
JS Fiddle demo.
With the use of the CSS transition properties, you can also use fade in/fade out:
.close {
opacity: 0; /* to hide the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
/* other CSS */
}
div:hover a .close {
opacity: 1; /* to reveal the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
JS Fiddle demo.
It's also worth noting that, prior to HTML 5, it's invalid to wrap a block-level element inside of an inline-level, the a, element. In HTML 5, though, this seems to be valid (though I've yet to find the W3 documentation to support this).
I'm trying to make a picture over picture fading with some text appearing on them purely with CSS3. I took the basic fading from here: http://css3.bradshawenterprises.com/cfimg1/
Now what I'm trying to do is, that when I hover the picture, then not only an other picture fades in, but some text too what contains a clickable link (for ie. a download link). The first problem was that the text appeared outside the div, which I could fix by adding this:
.crossfade h1 {
position: absolute;
}
I use h1, because paragraphs don't appear at all. So after this, I got the fading right, and even the text is in it's place, but it's not selectable and not clickable, it appears like it's a part of the image.
Here's my code so far (the html and the css part too):
<div class="crossfade">
<img class="bottom" src="pics\hover.jpg" />
<h1>Title</h1>
<img class="top" src="pics\23.jpg" />
</div>
.crossfade {
position:relative;
height:200px;
width:200px;
margin:0 auto;
}
.crossfade img {
position:absolute;
left: 0;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.crossfade img.top:hover {
opacity: 0;
}
.crossfade h1 {
position: absolute;
}
Any help or ideas on it would be greatly appreciated.
Thanks in advance.
http://jsfiddle.net/3tkWj/5/
I just added another :hover and z-index.
.crossfade img.top:hover, .crossfade p:hover+img {
opacity: 0;
}
edit : Here's a working exemple of what you want (see comments)
http://jsfiddle.net/3tkWj/12/
Beware, I trimed the CSS.