I have a few pictures in a table that they work as a link and in hover a play button should appear over them.
I tried many different tricks but they all have problems which dont work properly. I decieded to share my question here to find an standard solution.
Here is what I have done so far:
img{
position: relative;
}
img:hover:before {
background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
content:"";
width: 100%;
min-height: 100px;
position: absolute;
left: 0;
}
I dont know if I am in the right direction or not, but have a look at the demo http://jsfiddle.net/jmXdh/8/ and if it is wrong then please let me know any other way.
You unfortunately can't use the ::before and ::after pseudo-elements with replaced elements. The content of all replaced elements is outside the scope of CSS.
From the Generated and Replaced Content Module (WD):
Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.
Here's something that might work, assuming you can add additional markup:
http://jsfiddle.net/isherwood/jmXdh/11/
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a:hover .play {
background:url(http://placehold.it/80x80) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -50px;
}
<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
<b>Video test</b>
</a>
Or with a transition effect:
http://jsfiddle.net/isherwood/jmXdh/12/
.play {
opacity: 0;
transition: opacity 0.3s;
}
a:hover .play {
opacity: 0.7;
}
Related
I want to show a text animation where the second text moves in from the bottom and the first text moves out to the top. Here's the basic HTML structure:
<span style="position: relative; overflow: hidden; padding-right: 100px;">
<span style="display: block; position: absolute; left: 0px; top: 0px;">Text1</span>
<span style="display: block; position: absolute; left: 0px; top: 20px;">Text2</span>
</span>
Animation and layout details are left out for brevity.
Update: Here's a complete example for you to play with: http://jsfiddle.net/xpvt214o/577089/
My main issue is that the outside element should not be visible, but it is. The overflow property has no effect at all. How can I solve this?
The outer span element is inline because it flows in other text. Only parts of the sentence should swap out. And the animating text must be properly aligned with the rest of the sentence. inline-block for the outer element doesn't do that.
The clipping must also apply during the animation of the inner elements (transition: top 0.5s).
I've found the CSS properties clip and clip-path. The former being deprecated (and it doesn't work, too) and the latter being experimental and not supported in all required browsers (and it also fails in Firefox).
You have to use either inline-block or block in order to get the clipping to work. The thing is: if you have a blocky element that only contains absolutely positioned childs or is empty, it wont have any dimension - you have to set this manually. Try:
<span style="display: inline-block; position: relative; overflow: hidden; padding-right: 100px; height: 1.2em; line-height: 1.2em; vertical-align: bottom;">
<span style="display: block; position: absolute; left: 0px; top: 0px;">Text1</span>
<span style="display: block; position: absolute; left: 0px; top: 20px;">Text2</span>
</span>
I'm not sure why you are using inline CSS and SPANs for this but I think I've got the answer for you. Please check my solution and let me if you are not clear about it.
You can do this just using one element, using pseudo elements and nothing else. And SPAN is an inline element so you can assign inline-block to it.
Regards,
AB
.hover-text {
display: inline-block;
background-color: grey;
color: transparent;
color: white;
padding: 10px 25px;
position: relative;
overflow: hidden;
}
.hover-text:before {
content: 'Text 1';
padding: inherit;
position: absolute;
left: 0;
top: 0%;
background-color: inherit;
transition: 0.2s ease all;
}
.hover-text:after {
content: 'Text 2';
padding: inherit;
position: absolute;
left: 0;
bottom: -100%;
background-color: red;
transition: 0.2s ease all;
}
.hover-text:hover:before {
top: -100%;
}
.hover-text:hover:after {
bottom: 0%;
}
<span class="hover-text">Text 1</span>
I have a <div> with a background-image. When this is hovered over I would like another image to be placed on top partially transparent so the original image can be seen below.
My current idea involved adding a :hover state and changing the above images display state to visible along with necessary z-index values.
Could someone give me an example with jsfiddle.net implementation?
Why not use opacity?
The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.
The value applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, an
element and its contained children all have the same opacity relative
to the element's background, even if the element and its children have
different opacities relative to one another.
.myTransparentImage{
opacity: 0;
}
.myTransparentImage:hover{
opacity: 0.6; /* it's in pourcentage */
}
This way, the transparent image, on hover, will appear at 60% opacity so you can still see the one below. So it is on top of the other image the whole time but only appears once hovered.
Here is an example in a fiddle: https://jsfiddle.net/5ob6n7nq/
Whipped up a quick example for you. Hit "Run code snippet" to see it in action.
.image-holder {
background: url('http://i.imgur.com/5ln9Vmi.jpg');
height: 500px;
width: 500px;
position: relative;
}
.image-holder::before {
content: '';
background: url('http://i.imgur.com/khYHDfJ.jpg');
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
}
.image-holder:hover::before {
opacity: .5; /* amount of opacity to blend the two images */
}
<div class="image-holder">
</div>
If I correctly understand you: https://jsfiddle.net/3jabz7d3/
<div class="block1">
<div class="block2"></div>
</div>
.block1 {
position: relative;
width: 200px;
height: 200px;
background: url(http://writm.com/wp-content/uploads/2016/08/Cat-hd-wallpapers-1080x675.jpg) no-repeat center center;
background-size: cover;
}
.block2 {
position: absolute;
width: 100%;
height: 100%;
background: url(http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg) no-repeat center center;
background-size: cover;
display: none;
opacity: 0.3;
}
.block1:hover .block2{
display: block;
}
I'm not super comfortable with JS , but that seems to be the best way to do this , having a hard time applying other peoples solutions to my scenario.
Want an image to appear when hover over text.
I can get the image to appear on hover, but it appears up way up at top of page, and I am having a hard time getting it to appear in the viewport without indicating what the top margins is. Is that the best way to do it?
So far I have:
<div id="popup">
<div class="large-6 columns">
Bristol Hayward-Hughes <span> <img src="bristol.jpg" alt="Bristol" id="bristol"> </span>
</div>
</div>
and
#popup span {
display: none;
}
#popup a:hover span {
display: block;
position: absolute;
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
#bristol {
position: absolute;
z-index: 1;
margin-top: 100px;
}
If I'm understanding the question correctly, you'll need to place position:relative; in the parent Div: #popup that the image is residing in.
Check this Fiddle for reference: https://jsfiddle.net/rjschie/q87um7wd/2/
For an example: comment the position:relative; line under #popup and re-run the example. You'll see that the Image appears at the top of the window. Then uncomment it, and re-run and it will appear relative to the #popup div.
Please give relative positioning to your span that holds your image.
#popup a:hover span {
display: block;
position: relative; // Changed absolute to relative
//Give top and left position with respect to your anchor tag.
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
Remove the margin-top from the image tag as well.
#bristol {
position: absolute;
z-index: 1;
/*margin-top: 100px;*/ //Removed margin-top on the image
}
I'm trying to have it so that when I hover on an <img> tag, a div will appear over it. I want it to be a white overlay with text inside of it.
I cannot make the image a background-image, as much as I would like to. My code uses width:percent/max-width:pixels and height:auto/max-height:pixels, so without the img there, nothing would show up. And to my knowledge, there is no solution to that issue.
I attempted to give the image a unique id and apply a id:hover .class to have the div appear, but it didn't respond to any coding I gave it, let alone work right. I then tried putting the id on a div of its own over putting it on the picture with still no yield.
I also tried to make a div with the image as a background pic and made the hover as desired. I tried to make the div not implode by putting in another div that has the image constraints, but because of the height:auto, it didn't work.
I refuse to set height/width as pixels, as it would mess up the rest of my coding and one of the major reasons I'm coding what I am. So, if it's not possible because of this, that's fine; Just tell me.
My CSS is as follows:
#logo {
text-align: center;
width:100%;
max-width:769px;
height:auto;
overflow:hidden;
}
#bannerpic {
max-width:769px;
max-height:300px;
width:100%;
height:auto;
}
#bannerpic .logobody {
display:none;
}
#bannerpic:hover .logobody {
display:inline;
background-color:rgba(255,255,255,0.5);
width:100%;
height:100%;
}
My HTML is this:
<div id="logo">
<img id="bannerpic" src="https://dl.dropboxusercontent.com/u/67673862/logoTEMP.png">
<div class="logobody">text</div>
</img>
</div>
I don't know if you need to be able to click the image, but you can overlay text with absolute positioning.
#logo {
text-align: center;
height: auto;
overflow: hidden;
position: relative;
max-width: 469px;
}
#bannerpic {
width: 100%;
height: auto;
}
.logobody {
position: absolute;
background-color: pink;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.logobody:hover {
opacity: 1;
}
<div id="logo">
<img id="bannerpic" src="https://dl.dropboxusercontent.com/u/67673862/logoTEMP.png" />
<div class="logobody">text</div>
</div>
How about this:
#logo {
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.logobody {
position: absolute;
z-index: 2;
left: 0;
top: 0;
background-color: rgba(255,255,255,0.75);
visibility: hidden;
height: 100%;
width: 100%;
}
#logo:hover .logobody{
visibility: visible;
}
#bannerpic {
max-width:769px;
max-height:300px;
width:100%;
height:auto;
}
Here's a JSFiddle link for it:
https://jsfiddle.net/zVBDc/790/embedded/result/
Note: My example is using 0.75 alpha for the background. 0.5 seemed too low. Set it to whatever you prefer, though.
i've just made social media icons for my website. i wanted to look them a bit more interesting, so i put overlays on them, which appears, when you moving the hover over it.
i've tried to use
#bla:hover {
background-image: overlay.png;
}
but it didn't worked. Link here: http://tdfts.com/projects/akvile_test/
I also tried this (sorry i cannot really explain :D): http://tdfts.com/projects/akvile_test/website/
But this still did not work well, and looked awful in ie and ff.
do not mind the position of the social media bar.
the overlay should have a transition.
thank you in advance
Demo ..
CSS
.social-item{
width: 40px;
height: 40px;
position: relative;
cursor: pointer;
float: left;
margin: 5px;
}
.social-item .original{
width: 100%;
height: 100%;
}
.social-item .over{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.social-item:hover .over{
opacity: 1;
}
HTML
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fb.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fbhover.png" class="over" />
</div>
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitter.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitterhover.png" class="over" />
</div>
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/google.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/googlehover.png" class="over" />
</div>
Hope this will help you ..
According to your style above, instead of that you should use
#bla:hover {
background-image: url('overlay.png');
}
The url inside should have the correct location.
Regarding the position, you need to make the div which contain the overlay.png should be absolute. [position: absolute; top: 0;]
And make sure the parent a should be relative or absolute
You have
#fb {
height: 40px;
width: 40px;
background-image: url(img/socialmedia/fbhover.png);
}
in your style.css (line 72) thats causing the background-image to be applied automatically. Instead, you would want something like:
#fb {
height: 40px;
width: 40px;
}
#fb:hover {
background-image: url(...);
}
However, I doubt this is what you want. Setting a background-image on an <img src="foo.png"> will just show the background-image behind foo.png, and I'm guessing you want to replace the image entirely.
So you have two options:
1) Easier: Use jQuery's .hover() and .attr("") change the src of the <img> with Javascript.
2) Harder / Uglier (but doesn't require JS): Make two divs, one on top of the other. Make your default image be on the bottom and the hover one be on the top. Set the top div's opacity to 0 and then do a CSS :hover selector that changes the top div's opacity to 1. Frankly, I'd go with the first option.
You can apply some css like I did for facebook overlay
#overlayfb {
position: absolute;
height: 40px;
width: 40px;
z-index: 1;
background-image: url(img/socialmedia/fbhover.png);
top: -25px;
}
top in -25px;
use this
#overlayfb:hover {
top: -25px;
}
I think it will work for you