So this is my code and I was looking to use css3 transitions to fade in the text and background colour when you hover the image. I've tried numerous selectors and transition types but cant seem to get it right any help is greatly appreciated.
see demo below
http://jsfiddle.net/jiceb/xsFmA/
<a href="#">
<h2>Some Text</h2>
<img src="http://www.sheridanrogers.com.au/wp-content/uploads/2011/03/American-pancakes.jpg"/>
</a>
and css
a { position: relative; display: inline-block }
a img {
width:250px;
}
a h2 {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background: black;
color: #fff;
}
a:hover h2 {
display: block;
}
Rather than using display:none and display:block, simply use opacity and add a transition to your a h2 selector:
a h2 {
opacity:0; /* Completely invisible. */
transition:1s; /* A 1 second transition. */
}
a:hover h2 {
opacity:1; /* Completely visible. */
}
This will cause the opacity to increase from 0 to 1 over the period of 1 second.
JSFiddle demo.
Related
I would like to have a colored underline that looks like this when it breaks:
text-decoration-color seems to be not supported widely enough.
I tried this:
.underline {
position: relative;
}
.underline:after {
position: absolute;
content: '';
height: 1px;
background-color: #ffc04d;
bottom: .1rem;
right: 0;
left: 0;
z-index: -1;
}
<h1><span class="underline">Sprouted Bread</span></h1>
What about a linear-gradient where it will be easy to control color, size and distance within a single element:
.underline {
position: relative;
font-size:28px;
background:
linear-gradient(yellow,yellow) /* Color */
left 0 bottom 2px/ /* Position */
100% 2px /* Size (width height)*/
no-repeat;
}
<div style="width:150px;text-align:center"><span class="underline">Sprouted Bread</span></div>
As a side note, border-bottom works fine used with inline element but of course you cannot easily control the distance to make it behave as a text-decoration:
.underline {
position: relative;
font-size:28px;
border-bottom:2px solid yellow;
}
<div style="width:150px;text-align:center"><span class="underline">Sprouted Bread</span></div>
Try this JSFiddle
By wrapping the elements like you have in a span. You can put the text decoration on the parent element and the text color on the span.
HTML:
<h1><span class="underline">Some Text</span></h1>
CSS:
h1 {
text-decoration: underline;
color: red;
}
.underline {
color: blue;
}
Just add a border!
Using display: inline, add a bottom border and space it with padding.
You could also use line-height and then place negative margins to increase the space in between the lines.
And...you could also animate it!
.underline {
position: relative;
padding-bottom: 1px;
border-bottom: 1px solid #ffc04d;
}
<h1 style="width: 5em">
<span class="underline">Sprouted Bread</span>
</h1>
As mentioned by #chriskirknielsen, you could use box-decoration-break, although not supported by IE or Edge. Credits: #Temani Afif
When you hover over the paragraph text in JS Fiddle the image gets covered with the background. Using z-index everywhere I could think of doesn't have any effect. (I left the useless z-index stuff in there so show you what I tried.) I also tried pointer-events: none; in various places.
I also tried this type of thing elm1:hover elm2{}, but that didn't help. I'm new to CSS and I'm applying what I have searched and found.
Edit: The problem: on hover background color covers image
Markup:
<div id="col2-middle" class="three-cols-middle three-cols">
<a href="About.php#how-we-work- projects">
<h1 class="h-big-font">Specific Projects</h1>
<img class="col-img" src="3dplotCroppedWithFinancial.png" alt="3dplot">
<p class="p-on-white">
XXXXXXXX XXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX hover here to cover img XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<br/>
<br/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</p>
</a>
</div>
css:
div.three-cols {
float: left;
width: 29.33%;
position: relative;
left: 70.67%;
overflow: auto;
padding: 1% 1% 1% 1%;
min-width: 200px;
z-index:-1;
}
.three-cols a {
position: relative;
text-decoration: none;
color: #000;
}
.three-cols a p:hover {
background-color: #ecebeb;
}
.col-img {
float: left;
padding: 4%;
z-index: 1;
}
.three-cols h1 {
margin-bottom: 2%;
text-align: center;
}
.three-cols p {
padding: 0.5% 0 3% 0;
z-index: -1;
}
p {
word-wrap: break-word;
color: #000;
margin: 0;
padding: 10px 20px;
font-size: 16px;
}
Here is my demo:
http://jsfiddle.net/pxD33/
PS - needs to be responsive and solution all in CSS and HTML.
<a> is by default an inline-level element. Once you set display: block to it, it fixes the issue.
.three-cols a {
display: block;
position: relative;
text-decoration: none;
color: #000;
}
http://jsfiddle.net/teddyrised/pxD33/2/
p/s: You don't need z-index for your case. You can safely remove all of them.
Anything you use a z-index with has to also have a position attribute.
I hope this helps!
You can get rid of the z-indexes, and then change
.three-cols a p:hover {
background-color: #ecebeb;
}
to
.three-cols:hover {
background-color: #ecebeb;
}
Updated fiddle: http://jsfiddle.net/pxD33/1/
updated fiddle: Fiddle
just change anchor's display to block:
.three-cols a {
display:block;
position: relative;
text-decoration: none;
color: #000;
}
and give hover class to a not p:
.three-cols a:hover {
background-color: #ecebeb;
}
As #Terry said, setting display: block on your three-cols a element should do the trick.
If you want to have a "free hanging" picture on the left of your text, you could also use a media object.
Simply add the following rules
display: block;
overflow: hidden;
to col-img and three-cols p.
You can read more about the media object here.
Just been playing about with pointer-events property in CSS.
I have a div that I want to be invisible to all mouse events, except for :hover.
So all click commands go through the div to the one below it, but the div can report whether the mouse is above it or not still.
Can anyone tell me if this can be done?
HTML:
<div class="layer" style="z-index:20; pointer-events:none;">Top layer</div>
<div class="layer" style="z-index:10;">Bottom layer</div>
CSS:
.layer {
position:absolute;
top:0px;
left:0px;
height:400px;
width:400px;
}
Hover only. It is very easy. No JS... Prevent link default action too.
a:hover {
color: red;
}
a:active {
pointer-events: none;
}
Link here
Edit:
supported in IE 11 and above
http://caniuse.com/#search=pointer-events
"Stealing" Xanco's answer but without that ugly, ugly jQuery.
Snippet: Notice DIVs are in reverse order
.layer {
position: absolute;
top: 0px;
left: 0px;
height: 400px;
width: 400px;
}
#bottomlayer {
z-index: 10
}
#toplayer {
z-index: 20;
pointer-events: none;
background-color: white;
display: none
}
#bottomlayer:hover~#toplayer {
display: block
}
<div id="bottomlayer" class="layer">Bottom layer</div>
<div id="toplayer" class="layer">Top layer</div>
I don't think it's possible to achieve your aims in CSS alone. However, as other contributors have mentioned, it's easy enough to do in JQuery. Here's how I've done it:
HTML
<div
id="toplayer"
class="layer"
style="
z-index: 20;
pointer-events: none;
background-color: white;
display: none;
"
>
Top layer
</div>
<div id="bottomlayer" class="layer" style="z-index: 10">Bottom layer</div>
CSS (unchanged)
.layer {
position:absolute;
top:0px;
left:0px;
height:400px;
width:400px;
}
JQuery
$(document).ready(function(){
$("#bottomlayer").hover(
function() {
$("#toplayer").css("display", "block");
},
function() {
$("#toplayer").css("display", "none");
}
);
});
Here's the JSFiddle: http://www.jsfiddle.net/ReZ9M
You can also detect hover on different element and apply styles to it's child, or using other css selectors like adjacent children, etc.
It depends on your case though.
On parent element hover. I did this:
.child {
pointer-events: none;
background-color: white;
}
.parent:hover > .child {
background-color: black;
}
Pure CSS solution to your request (the opacity property is there just to illustrate the need for the transitions):
.hoverOnly:hover {
pointer-events: none;
opacity: 0.1;
transition-delay: 0s;
}
.hoverOnly {
transition: ,5s all;
opacity: 0.75;
transition-delay: 2s;
}
What it does:
When the mouse enters the box, it triggers the :hover state. However, in that state, the pointer-events are disabled.
But if you do not set the transitions timers, the div will cancel the hover state when the mouse moves; the hover state will flicker while the mouse is moving inside the element. You can perceive this by using the code above with the opacity properties.
Setting a delay to the transition out of the hover state fixes it. The 2s value can be tweaked to suit your needs.
Credits to transitions tweak: patad on this answer.
Just pure css, doesn't need jquery:
div:hover {pointer-events: none}
div {pointer-events: auto}
I use the :hover pseudo-element of an equal-sized parent/container to simulate a hover over my overlay div, then set the overlay's pointer-events to none to pass through clicks to elements below.
let button = document.getElementById('woohoo-button');
button.onclick = () => console.log('woohoo!');
let overlay = document.getElementById('overlay');
overlay.onclick = () => console.log(`Better change my pointer-events property back to 'none'`);
#container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: green;
width: 300px;
height: 300px;
}
#overlay {
background-color: black;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
/* Pass through clicks */
pointer-events: none;
}
/*
Set overlay hover style based on
:hover pseudo-element of its
container
*/
#container:hover #overlay {
opacity: 0.5;
}
#woohoo-button {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
<div id="container">
<div id="overlay"></div>
<button id="woohoo-button">
Click Me
</button>
</div>
I know this question has been asked a hundred times and I have read every last one of them.
I have an image that is also a link. When the image is hovered it shows a new image and I have a small paragraph description I would like to pop up next to the image when the link is hovered over as well. Simple, right?
What i'm doing makes sense to me, and is the answer to this question. What am I doing wrong? This seems very straightforward.
How to show text on image when hovering?
I will paste my relevant code. Comparing to the posted link answer, I have the class project1 instead of imgWrapper and novelDescrip instead of imgDescription
HTML
<div class="project1">
<img id="novel" src="img/newnovel.png" onmouseover="this.src='img/newnovelblue.png'" onmouseout="this.src='img/newnovel.png'" />
<p class="novelDescrip" >A website for a local musician to market, stream, and distribute music and merchandise.</p>
</div>
CSS
.project1 p {
width: 25%;
margin: 20px 15px 0 0;
float: right;
}
.novelDescrip {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility opacity 0.2s;
}
.project1:hover .novelDescrip {
visibility: visible;
opacity: 1;
}
EDIT
Here is my problem now, the text hides and reveals but the hover is activated anytime my mouse is hovering in the area enclosed by the rectangle I drew on this image. Any ideas on why this is happening?
You don't need the the positions. top:0;left: 0; with absolute positioned div will always show up on top left corner of the browser. also added display:inline for the novelDescrip for the div to show-up next to the image.
.project1 p {
width: 25%;
margin: 20px 15px 0 0;
float: right;
}
.novelDescrip {
position: absolute;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility opacity 0.2s;
display:inline;
}
.project1:hover .novelDescrip {
visibility: visible;
opacity: 1;
}
Hope this is what you are looking for.
My be this will solve your problem
img {
height:30%;
width:30%;
}
.project1 p
{
width: 65%;
float: right;
display:none;
margin-left:5px;
}
.project1:hover .novelDescrip
{
display:block;
}
Live Demo
My current project involves setting up a bunch of sidebar links, such that the finished design looks like this:
The envelopes are supposed to move and overlap (i.e., change z-index), depending upon which icon/text is currently has :hover state.
I thought each would be a separate PNG file, but I've been given a sprite that looks like this:
Any suggestions how I could achieve this? Normally I'd just change the background position of the list elements each piece of text is in, but I don't think this is possible given the overlapping nature of these. Does he just need to export it differently?
Many thanks...
To me it looks like that sprite would work perfectly. The left most image is for when book is hovered, second image for twitter, third for facebook, forth for email. I'm guessing the last one is just the default state. Its tricky to make this work with pure css and :hover (but possible!), however, it would be extremely easy with javascript.
For the pure css solution, the div with the sprite would have to be the child of all the text elements, so you could change the background based on :hover on the parent (the text). If this isn't clear, I can make you some example code.
Edit:
Its not perfect, but its a proof of concept.
JsFiddle: http://jsfiddle.net/jp6fy/
CSS:
#side{
position:relitive;
height:341px;
width:250px;
}
#link1{
top:0;
}
.link{
position:absolute;
left:0;
top:85px;
height:85px;
padding-left:160px;
width:90px;
}
#image{
position:absolute;
top:-255px;
left:0;
z-index:-1;
background:url(http://i.stack.imgur.com/I2Y4k.png) -720px 0;
height:341px;
width:150px;
}
#link1:hover #image{
background-position:-540px 0;
}
#link2:hover #image{
background-position:-360px 0;
}
#link3:hover #image{
background-position:-180px 0;
}
#link4:hover #image{
background-position:-0px 0;
}
HTML:
<div id='side'>
<div class='link' id='link1'>
email
<div class='link' id='link2'>
facebook
<div class='link' id='link3'>
twitter
<div class='link' id='link4'>
book
<div id='image'></div>
</div>
</div>
</div>
</div>
</div>
It is possible. (But ugly.)
As a :hover selector can only affect elements inside (or directly adjacent) to the triggering element, the solution is to nest the trigger elements: (jsFiddle)
<style>
div {
width: 100px;
height: 100px;
position: absolute;
left: 100px;
}
#image { background: black; }
#trigger1, #trigger1:hover #image { background: red; }
#trigger2, #trigger2:hover #image { background: green; }
#trigger3, #trigger3:hover #image { background: blue; }
</style>
<div id="trigger1">
<div id="trigger2">
<div id="trigger3">
<div id="image"></div>
</div>
</div>
</div>
But preferably, you'd get the envelope sprites exported separately (you can of course still use CSS sprites). That should give you simpler HTML and CSS, a smaller image, and you'll avoid having to muck around with nested absolutely positioned elements, each having its own coordinate system.
I tried an approach which keeps the markup fairly simple, with only one extra non-semantic div per item:
<ul>
<li id="email">
<div class="background"></div>
<em>Email</em> chris
</li>
<li id="facebook">
<div class="background"></div>
<em>Facebook</em> follow us
</li>
<li id="twitter">
<div class="background"></div>
<em>Twitter</em> your life away
</li>
<li id="book">
<div class="background">
</div><em>Book</em> a project
</li>
</ul>
I positioned all the different copies of the background div at the same place, then varied the background position based on the hover states:
/* First, just style the document and the list text in general.
skip on for the important bit */
body {
background-color: black;
color: white;
}
ul {
width: 350px;
margin-top: 40px;
position: relative;
}
li {
margin-right: 40px;
font-family: "Century Gothic", Helvetica, sans-serif;
text-align: right;
margin-bottom: 0px;
padding: 15px 4px 25px 0;
}
li em {
text-transform: uppercase;
display: block;
}
li:hover {
color: red;
}
/* From here down is the important bit */
/* Set up the sprite in all the .background divs */
div.background {
background-image: url(http://i.stack.imgur.com/I2Y4k.png);
position: absolute;
top: 0;
left: 0;
height: 341px;
width: 160px;
}
/* By default, turn off the background in all the divs */
div.background {
display: none;
}
/* Just picking an arbitrary item to show the default, non-hover background */
#email div.background {
display: block;
background-position-x: -737px;
}
/* If we're hovering over the list as a whole, disable the default background,
so it doesn't show up underneath the background we want to display */
ul:hover #email div.background {
display: none;
}
/* For the email item, which shows our arbitrary default background, override
to the email background on hover with more specificity than the default rule */
ul:hover #email:hover div.background {
display: block;
background-position-x: 0px;
}
/* For all other items, override to their background on hover */
#facebook:hover div.background {
display: block;
background-position-x: -375px;
}
#twitter:hover div.background {
display: block;
background-position-x: -189px;
}
#book:hover div.background {
display: block;
background-position-x: -556px;
}
Working, though slightly rough example, in this jsFiddle.
Note that it's okay to have multiple copies of the sprite in multiple different divs; the browser will just grab one copy for its cache and use that for all instances of the image.
Could you create an image map and then hover swaps the image to the one with the correct envelope in front. See this link on an interesting link
google search link on idea
My method with clean HTML.
.nav { position: relative; }
.nav li {
margin-left: 179.8px;
list-style-type: none;
}
.nav li:before {
position: absolute;
left: 0; top: 0;
content: url(http://i.stack.imgur.com/I2Y4k.png);
clip: rect(0 899px 341px 719.2px);
margin-left: -719.2px;
z-index: 1;
}
.nav li:hover:before { z-index: 2; }
.email:hover:before {
clip: rect(0 179.8px 341px 0);
margin-left: 0;
}
.facebook:hover:before {
clip: rect(0 359.6px 341px 179.8px);
margin-left: -179.8px;
}
.twitter:hover:before {
clip: rect(0 539.4px 341px 359.6px);
margin-left: -359.6px;
}
.book:hover:before {
clip: rect(0 719.2px 341px 539.4px);
margin-left: -539.4px;
}
<ul class="nav">
<li class="email">Email</li>
<li class="facebook">Facebook</li>
<li class="twitter">Twitter</li>
<li class="book">Book</li>
</ul>