Im trying to overlay another image over an image whenever someone toggles the hover state.
How can I show the second image?
<img src="my-image-url" />
Here you go, Image shows up when you hover the div:
Example : jsFiddle
HTML:
<div> <img src="http://img122.imageshack.us/img122/1512/spiderman4teaserwo2.jpg" />
</div>
CSS:
div:hover img{
opacity: 1;
}
img{
position: relative;
width :100%;
height: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
DEMO: http://jsfiddle.net/pDeKy/1/
HTML
<a href="#">
<img src="http://placekitten.com/200" />
<img src="http://placekitten.com/100" class="hovery" />
</a>
CSS
a {
position: relative;
}
/* Make our images sit on top of one and other */
a img {
position: absolute;
}
.hovery {
display: none;
}
a:hover .hovery {
display: block;
}
Related
I am attempting to trigger CSS animations when a pseudo element is hovered.
I currently have 2 videos that show depending which 50% side of the browser the mouse is hovering and I want to apply a similar effect to animate some text.
I want the <p> tag to move up and fade in while moving the <h1> tag up at the same time and in the same way, like this website:
https://seedlipdrinks.com/uk/
Here's the kind of structure I'm working with for my <p> and <h1> tags:
<div class="caption_overlay">
<div class="caption_grid">
<div class="live_caption">
<h1>A mix of apartments and terrace homes</h1>
<p>Explore</p>
</div>
<div class="eat_caption">
<h1>A brand new public eat street</h1>
<p>Explore</p>
</div>
</div>
</div>
CSS
Current code for videos
.video_hover {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.video_hover::before {
content:"";
display:block;
width:50%;
height:100%;
position: absolute;
top: 0;
z-index:100;
}
.video_hover video {
display:block;
width: 100%;
height: 100%;
}
.live_video:hover video {
opacity:0;
}
.live_video::before {
right: 0;
}
.live_video:hover + .eat_video video {
opacity:1;
}
.eat_video video {
opacity:0;
}
.eat_video::before {
left: 0;
}
Example of code for text animation. I want the h1 and p tags to begin with padding-top: 100px; and remove or add padding depending on whether mouse is hovering left or right side of the screen like the website I referenced
.live_caption h1:hover, .eat_caption h1:hover {
padding-top: 0px;
-webkit-transition: .4s ease-in-out opacity;
-moz-transition: .4s ease-in-out opacity;
-o-transition: .4s ease-in-out opacity;
transition: .4s ease-in-out opacity;
}
.live_caption p:hover, .eat_caption p:hover {
padding-top: 0px;
opacity: 1;
-webkit-transition: .4s ease-in-out opacity;
-moz-transition: .4s ease-in-out opacity;
-o-transition: .4s ease-in-out opacity;
transition: .4s ease-in-out opacity;
}
A CSS-only approach can be achieved by nesting the caption markup (ie your <h1> and <p> tags) with the corresponding video elements in your existing page structure:
<div class="live_video video_hover">
<video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
</video>
<!-- Nest caption block with live_video video block -->
<div class="caption">
<h1>A mix of apartments and terrace homes</h1>
<a href="#">
<p>Explore</p>
</a>
</div>
</div>
By doing this, you can then specify CSS that modifies the transform property of the newly introduced .caption element (of each video) so that the "y translation" of respective captions are toggled between 0% and 100%, depending on the user interaction.
To achieve a smooth animated effect when those captions are translated, the transition property is applied to the transform property:
transition: transform ease-in-out 0.5s
Doing this causes the caption to smoothly animate between differenet transforms when the transform value changes.
In code, this solution can be implemented as:
.video_hover {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
/* Add this */
overflow: hidden;
}
.video_hover video {
display: block;
width: 100%;
height: 100%;
}
.video_hover::before {
content: "";
display: block;
width: 50%;
height: 100%;
position: absolute;
top: 0;
z-index: 100;
}
.live_video::before {
left: 0;
}
.eat_video::before {
right: 0;
}
.eat_video video {
visibility: hidden;
}
.live_video:hover video {
visibility: hidden;
}
.live_video:hover+.eat_video video {
visibility: visible;
}
/* New CSS begins */
/* Define common styling for caption blocks of either video */
.caption {
position: absolute;
bottom: 0;
width: 50%;
z-index: 150;
transition: transform ease-in-out 0.5s;
background: pink;
pointer-events: none;
}
/* Live video caption visible by default (out of view) */
.live_video .caption {
left: 0;
transform: translateY(100%);
}
/* Eat video caption hidden by default (out of view) */
.eat_video .caption {
right: 0;
transform: translateY(100%);
}
/* Animate eat video caption into view when hovering the pesudo element */
.live_video:hover .caption {
transform: translateY(0%);
}
/* Animate live video caption out of view when hovering the pesudo element */
.eat_video:hover .caption {
transform: translateY(0%);
}
<div class="live_video video_hover">
<video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
</video>
<!-- Nest caption block with corresponding video to display with -->
<div class="caption">
<h1>A mix of apartments and terrace homes</h1>
<a href="#">
<p>Explore</p>
</a>
</div>
</div>
<div class="eat_video video_hover">
<video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
<source src="https://www.fbdemo.com/video/video/demo.mp4" type="video/mp4" >
</video>
<!-- Nest caption block with corresponding video to display with -->
<div class="caption">
<h1>A brand new public eat street</h1>
<a href="#">
<p>Explore</p>
</a>
</div>
</div>
I am trying to get the title to stick to the bottom of the hover box, so that when the user hovers over the title, the hover box appears with the title on the bottom. It should close from the title upwards, so that the entire box is covered by the description, but the title remains on the bottom. How do I get the hover box to appear with the title not moving?
I attached my code below so that you can see what I am talking about. When you hover over the h1 pictureTitle, it goes towards the middle of the picture because of the transform effect. I want it to remain at the bottom, and have the black background close upwards from the title, so that the hover box seems like it is a part of the title.
.img__wrap {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.picture {
width: 200px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
opacity: 0;
transition: opacity 0.2s;
visibility:hidden;
}
.img__wrap:hover .img__description {
opacity: 1;
background:black;
height:100%;
visibility:visible;
transition-delay: 0.5s;
}
.img__wrap:hover .picture {
-moz-transform: scale(1.8);
-webkit-transform: scale(1.8);
transform: scale(1.8);
}
.pictureTitle{
background:black;
height:50px;
width:200px;
position:relative;
bottom:70px;
text-decoration:none;
color:red;
}
<div class="img__wrap">
<a href="myHomePage.html" style="text-decoration:none;">
<img src="http://www.dogbreedplus.com/dog_names/images/puppy-dog-names.jpg" alt="hover box is supposed to encapsulate picture"
class="picture">
<p class="img__description">
This is where the hover box should pop up explaining the picture it should flow from title and cover the box.
</p>
<h1 class="pictureTitle">Title </h1>
</a>
</div>
1. Title stay bottom issue
The title is staying in the same position. It doesn't move. You need to move it together with the image resizing. As the image is resizing to cover the full img__wrap div, you should change the bottom value of the pictureTitle from 70px to 0px and also add a transition to it. And so, it will move together with the image and always position it self at the bottom of the image
So your question is a wrong. You have to move the title otherwise it will stay in the same position as initially set.
2. Expand black background from bottom to top
Here is another problem with your code. You want to transition visibility:hidden to visibility: visible . This is not possible because you cannot animate non numeric values like visibility:hidde/visible or display:none/block. You should just use opacity:0 and opacity:1 on hover.
Then position the img__description at the bottom ( bottom:0 without top:0 ) and add an initial height of 0px . Then at hover add height:100%
Let me know if you have other questions. Cheers! :D
.img__wrap {
position: relative;
height: 190px;
width: 200px;
overflow: hidden;
}
.picture {
width: 200px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.img__description {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #fff;
opacity: 0;
transition: 0.2s;
margin: 0;
background: black;
height: 0;
}
.img__wrap:hover .img__description {
opacity: 1;
height: 100%;
transition-delay: 0.5s;
}
.img__wrap:hover .picture {
-moz-transform: scale(1.8);
-webkit-transform: scale(1.8);
transform: scale(1.8);
}
.pictureTitle {
background: black;
height: 50px;
width: 200px;
position: relative;
bottom: 70px;
text-decoration: none;
color: red;
transition: 0.5s;
}
.img__wrap:hover .pictureTitle {
bottom: 0;
}
<div class="img__wrap">
<a href="myHomePage.html" style="text-decoration:none;">
<img src="http://www.dogbreedplus.com/dog_names/images/puppy-dog-names.jpg" alt="hover box is supposed to encapsulate picture" class="picture">
<p class="img__description">
This is where the hover box should pop up explaining the picture it should flow from title and cover the box.
</p>
<h1 class="pictureTitle">Title </h1>
</a>
</div>
use picture of 200x200 if your want to use height or for now add height:200px to class .picture image will stretch but it will resolve your problem, so instead of this use a perfect image 200x200
i used uib carousel in angular js ,for slide video in every 5 sec. for that used object element to embed video in that using vlc plugin.but porblem is that uib carousel have fixed height and width. how i change it and make it response.
if i use image in carousel that it simple to change height of it but when i used object tag than it not change the height .
i used it like this
<div ng-controller="CarouselDemoCtrl">
<div >
<uib-carousel interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="slide in slides" active="slide.active">
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" id="vlc">
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" name="vlc" />
</object>
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
thank you.
change this lines from bootstrap.min.css to change height and width
before
.carousel { position: relative }
.carousel-inner { position: relative; width: 100%; overflow: hidden }
.carousel-inner>.item { position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left }
.carousel-inner>.item>a>img, .carousel-inner>.item>img { line-height: 1 }
After
.carousel { position: absolute;height:100%;min-height: 100%;width:100%; }
.carousel-inner { position: relative; width: 100%; height:100%;min-height: 100%;}
.carousel-inner>.item {height:100%;min-height: 100%; position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left;width:100%; }
.carousel-inner>.item>a>img, .carousel-inner>.item>img { line-height: 1 }
I'm trying to make a child div (.imagehead) slide to the left (about 25%) on hover of the parent div (#bite) and reveal another div (Name not decided, but I want it to be 2-3 lines of text) to the right of (.imagehead), relative to where (.imagehead) is.
I haven't coded in a while, sorry if this is extremely simple and I just can't solve this.
Here is the code itself (a tumblr theme I'm messing with)
<div id="headbox">
<div class="top">
<div class="nav">
<div align="center">
<BR/>
<BR/>
<div class="headimage"><img src="http://s24.postimg.org/gqgjloln9/head.png"></div>
<div id="transitiontext">I want to show this when "headbox" is hovered on, moving "headimage" to the left 25% and revealing this text next to it</div>
<BR/>
<BR/>
</div>
</div>
</div>
#headbox {
top: 30px;
}
#headbox:hover .headimage {
left: 25%;
}
http://jsfiddle.net/bko87pk9/
The image is made position: absolute to remove it from the normal flow. The text will now display underneath.
The nav container is made position: relative so that its absolute children will position themselves in relation to it and not the body
The image is moved on hover and the transition creates a smooth animation to display the text
Examples
Example 1
In this example, the text needs to be contained in a box the same height and width of the image so it does not peek out from underneath.
.nav {
height: 100px;
position: relative;
}
.headimage {
position: absolute;
transition: left 0.5s;
left: 0;
}
.nav:hover .headimage {
left: 25%;
}
.transitiontext {
width: 25%;
}
<div class="nav">
<img class="headimage" src="http://s24.postimg.org/gqgjloln9/head.png">
<div class="transitiontext">This text needs to be contained properly.</div>
</div>
Example 2
In this example, the text can spill out underneath as it will be hidden with opacity: 0. On hover the opacity is changed to opacity: 1 with a smooth transition.
The opacity value changes the z-value of the text div, so we need to declare z-index values (higher will display on top of lower)
pointer-events: none prevents the hover from activating when hovering the hidden text.
.nav {
height: 77px;
/* height of image */
position: relative;
}
.headimage {
position: absolute;
transition: left 0.5s;
left: 0;
z-index: 2;
}
.nav:hover .headimage {
left: 25%;
}
.transitiontext {
width: 25%;
transition: opacity 0.5s;
opacity: 0;
z-index: 1;
pointer-events: none;
}
.nav:hover .transitiontext {
opacity: 1;
}
<div class="nav">
<img class="headimage" src="http://s24.postimg.org/gqgjloln9/head.png">
<div class="transitiontext">This text does not need to be contained as it will be hidden until the hover state is activated. This text does not need to be contained as it will be hidden until the hover state is activated.</div>
</div>
I am sorry for any not working code, I crested this on my phone.
<div id="test">
Hover on this div.
</div>
#test {
height: 100px;
width: 200px;
background-color: #F1F1F1;
-webkit-transition:
all 1s ease-in-out
all 1s linear;
-moz-transition:
all 1s ease-in-out
all 1s linear;
-ms-transition:
all 1s ease-in-out
all 1s linear;
-o-transition:
all 1s ease-in-out
all 1s linear;
transition:
all 1s ease-in-out
all 1s linear;
}
#test:after {
height: 100px;
width: 200px;
content: "Second div.";
display: none;
background-color: #F9F9F9;
position: absolute;
top: 0px;
left: 210px;
}
#test:hover:after {
display: block;
}
I have two navigational elements that are set up as columns on either side of an image. You can see them in place at my website, here. Click on any image and after it loads, hover over it.
What I'm trying to accomplish is as follows:
When the cursor is outside of the image, both nav buttons are set at 0% opacity.
When the image is hovered in the center (not over either of the two nav buttons), both nav buttons are set at 50% opacity.
When either nav button is hovered directly, it is set at 100% opacity and the other nav button is set at 0% opacity.
This isn't working at the moment. HTML is as follows:
<div id="sb-body">
<a id="sb-nav-previous" class="sb-bignav" title="Previous" onclick="Shadowbox.previous()"></a>
<a id="sb-nav-next" class="sb-bignav" title="Next" onclick="Shadowbox.next()"></a>
<div id="sb-body-inner">
<img style="position: absolute;" src="Corrosion.jpg" id="sb-player" height="405" width="609">
</div>
</div>
And CSS is as follows:
#sb-nav-next {
right:0;
background:url('../images/nav-right.png') center center no-repeat;
}
#sb-nav-previous {
left:0;
background:url('../images/nav-left.png') center center no-repeat;
}
#sb-body:hover .sb-bignav {
opacity:0.5;
-webkit-opacity:0.5;
-moz-opacity:0.5;
}
#sb-nav-next:hover #sb-nav-previous,
#sb-nav-previous:hover #sb-nav-next {
opacity:0;
-webkit-opacity:0;
-moz-opacity:0;
}
.sb-bignav {
cursor:pointer;
position:absolute;
width:200px;
height:100%;
top:0;
z-index:400;
opacity:0;
-webkit-opacity:0;
-moz-opacity:0;
transition: opacity .125s ease-in;
-webkit-transition: opacity .125s ease-in;
-moz-transition: opacity .125s ease-in;
}
.sb-bignav:hover {
opacity:1.0;
-webkit-opacity:1.0;
-moz-opacity:1.0;
}
Demo: http://jsfiddle.net/zNkcQ/
This can be done using pure CSS, but, you need to move the previous and next elements past the inner body element.
Demo: http://jsfiddle.net/SO_AMK/c5Xn3/
CSS:
#sb-body-inner {
height: 405px;
}
/* This is the height of the image inside the slider.
If you do not change this line than #sb-body-inner will be about 20px tall and
will not trigger the hover event */
#sb-body-inner:hover ~ #sb-nav-previous.sb-bignav,
#sb-body-inner:hover ~ #sb-nav-next.sb-bignav {
opacity: 0.5;
}
#sb-nav-previous.sb-bignav:hover,
#sb-nav-next.sb-bignav:hover {
opacity: 1.0;
-webkit-opacity: 1.0;
-moz-opacity: 1.0;
}
.sb-bignav {
cursor: pointer;
position: absolute;
width: 200px;
height: 100%;
top: 0;
z-index: 400;
opacity: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
transition: opacity .125s ease-in;
-webkit-transition: opacity .125s ease-in;
-moz-transition: opacity .125s ease-in;
}
#sb-nav-next {
right: 0;
background: url('http://www.element17.com/images/nav-right.png') center center no-repeat;
}
#sb-nav-previous {
left: 0;
background: url('http://www.element17.com/images/nav-left.png') center center no-repeat;
}
HTML:
<div id="sb-body">
<div id="sb-body-inner">
<img style="position: absolute;" src="http://www.element17.com/gallery/01_CONSTRUCTS/Shear.jpg" id="sb-player" height="405" width="609">
</div>
<a id="sb-nav-previous" class="sb-bignav" title="Previous" onclick="Shadowbox.previous()"></a>
<a id="sb-nav-next" class="sb-bignav" title="Next" onclick="Shadowbox.next()"></a>
</div>
The first problem is the specificity of each selector. The more specific (more points) overrides the less specific (fewer points).
ID: 100 points
Class: 10 points
Element: 1 point
Then, this rule has 110 points:
#sb-body:hover .sb-bignav {
opacity:0.5;
-webkit-opacity:0.5;
-moz-opacity:0.5;
}
Below, the rule has 10 points and is being overwritten by the previous rule with 110:
.sb-bignav:hover {
opacity:1.0;
-webkit-opacity:1.0;
-moz-opacity:1.0;
}
Try this CSS:
#sb-nav-next {
right:0;
background:url('http://www.element17.com/images/nav-right.png') center center no-repeat;
}
#sb-nav-previous {
left:0;
background:url('http://www.element17.com/images/nav-left.png') center center no-repeat;
}
#sb-body:hover .sb-bignav {
opacity:0.5;
-webkit-opacity:0.5;
-moz-opacity:0.5;
}
#sb-body .sb-bignav:hover {
opacity:1.0;
-webkit-opacity:1.0;
-moz-opacity:1.0;
}
.sb-bignav {
cursor:pointer;
position:absolute;
width:200px;
height:100%;
top:0;
z-index:400;
opacity:0;
-webkit-opacity:0;
-moz-opacity:0;
transition: opacity .125s ease-in;
-webkit-transition: opacity .125s ease-in;
-moz-transition: opacity .125s ease-in;
}
Demo: http://jsfiddle.net/DmAVQ/
The second problem is that you can not do the third item only with CSS.
"When either nav button is hovered directly, it is set at 100% opacity and the other nav button is set at 0% opacity."
You need to use JavaScript to do this.
Well, I've exhausted all of my references for a css solution to this problem. The issue is that you'll never get the left nav overlay to become transparent because there is no way to select an element's preceding sibling. I used
#sb-body .sb-bignav:hover ~ .sb-bignav {
opacity: 0;
}
with success on getting the right nav overlay to become transparent, but that's it.
I suggest using jQuery to do this:
OLD
$('.sb-bignav:hover').siblings().css('opacity', 0);
NEW
$('.sb-bignav').hover( function(){
var self = $(this);
self.css('opacity', 1);
self.siblings('.sb-bignav').css('opacity', 0);
}, function(){
var self = $(this);
self.css('opacity', .5);
self.siblings('.sb-bignav').css('opacity', .5);
});
Just an idea...
Maybe you could do it by placing 2 clone navs in your anchor tags...
I made a fiddle:
http://jsfiddle.net/zNkcQ/5/
<div id="sb-body">
<a id="sb-nav-previous" class="sb-bignav" title="Previous" onclick="Shadowbox.previous()">
<span class="sb-img-next"></span>
<span class="sb-img-previous"></span>
</a>
<a id="sb-nav-next" class="sb-bignav" title="Next" onclick="Shadowbox.next()">
<span class="sb-img-previous"></span>
<span class="sb-img-next"></span>
</a>
<div id="sb-body-inner">
<img style="position: absolute;" src="Corrosion.jpg" id="sb-player" height="405" width="609">
</div>
</div>
.sb-img-previous{
left:0;
pointer-events: none;
background:url('http://www.element17.com/images/nav-left.png') center center no-repeat;
}
.sb-img-next{
right:0;
pointer-events: none;
background:url('http://www.element17.com/images/nav-right.png') center center no-repeat;
}
.sb-img-previous, .sb-img-next{
position: fixed;
width: 200px;
height: 100%;
etc...
}
#sb-nav-previous .sb-img-next,
#sb-nav-next .sb-img-previous,
#sb-nav-previous:hover .sb-img-previous,
#sb-nav-next:hover .sb-img-next{
opacity: 0.5;
pointer-events: none; //So each button will not be burdened by its duplicate...
}
#sb-nav-previous .sb-img-previous,
#sb-nav-next .sb-img-next,
#sb-nav-previous:hover .sb-img-next,
#sb-nav-next:hover .sb-img-previous{
opacity: 0;
}