<div class="pic">
<img src="image.jpg" height="250"/>
<span class="text" style="display:none">text here</span>
</div>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$('img').css('opacity', 0.4);
$('img').next('span.text').show();
$('img').bind('mouseover', function () {
$(this).css('opacity', 1.0);
$(this).next('span.text').hide();
});
$('img').bind('mouseout', function () {
$(this).css('opacity', 0.3);
$(this).next('span.text').show();
});
</script>
I have an opaque image that becomes fully visible on mouseover. I added text with span that would disappear on mouseover and reappear on mouseout similarly to the opaqueness on the image. I tried to center the text with margin-left:auto and margin-right:auto in CSS, but lacked results. Is there a way to center the text while still having the opaqueness and the text disappear on mouseover? Is Javascript the best way to do it?
Thanks
Couldn't you do this with CSS?
body {
text-align: center;
}
.pic {
display: inline-block;
margin: 25px;
border: 1px solid red;
position:relative;
}
.pic img {
display: block;
opacity: 0.4;
transition: opacity 0.5s ease;
}
.text {
opacity: 1;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
transition: opacity 0.5s ease;
}
.pic:hover img {
opacity: 1;
}
.pic:hover .text {
opacity: 0;
}
<div class="pic">
<img src="http://lorempixel.com/output/city-q-c-250-250-7.jpg" />
<span class="text">text here</span>
</div>
Related
What I would like to accomplish is that when the image changes after the hover it stays like that for a few seconds, and then it returns to the original image.
What I would like to know is if there's a way to add that kind of delay. I have attached my code below.
<html>
<body>
<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg'
width='142' height='162'
onmouseover="this.src='http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg';"
onmouseout="this.src=http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg';" />
</body>
</html>
Use CSS transitions with the transition-delay property.
.classname {
width: 100px;
height: 100px;
background-color: red;
transition-property: background-color;
transition-delay: 1s;
transition-duration: 0.1s;
}
.classname:hover {
transition-delay: 0s;
background-color: blue;
}
.image {
width: 142px;
height: 162px;
background-image: url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg');
background-size: 100% 100%;
transition-property: background-image;
transition-delay: 1s;
transition-duration: 0.1s;
}
.image:hover {
transition-delay: 0s;
background-image: url('http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg')
}
<div class="classname"></div>
<div class="image"></div>
Change your onmouseout event to call a JS function with setTimeout
setTimeout(function(){
this.src= "...";
}, 5000);
Where 5000 is the time in milliseconds you want to delay.
You could just use CSS transitions.
.button {
background-color: #222;
color: #fff;
padding: 14px 36px;
text-decoration: none;
transition: 0.6s background-color ease
}
.button:hover {
background-color: #555;
}
<a href='#' class='button'>Hover me</a>
See this example to change <img> src with onmouseover event and wait 3's then get back to original image onmouseout
//copy original img to variable
var original = $("img")[0].src;
//mouse over event
$("img").mouseover(function() {
$(this).fadeOut("fast").fadeIn("fast");
//change image
$(this)[0].src = "http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg";
});
//mouse out event
$("img").mouseout(function() {
var img = $(this);
//on mouse over wait 3 second and getback to original img
setTimeout(function() {
img.fadeOut("fast").fadeIn("fast");
img[0].src = original;
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg' width='142' height='162' />
There is a several ways to do this.
You can try the snippet below:
<div>
<img src='http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg' width='142' height='162'/>
<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg' width='142' height='162'/>
</div>
div{
width:142px;
height:162px;
overflow: hidden; /*required*/
}
div img{
position: absolute;
transition: opacity .5s ease;
transition-delay: .5s; /*time of transition that you want*/
}
div img:hover{
opacity: 0;
}
Another way is just use a background of this images and manage each one.
Full example: jsbin
I have an h1 and a positioned over a canvas element. It ends up looking like this:
(note the weird black boxes around the text)
If it's relevant, this text is part of an overlay that fades in/out on mouseover (handled with css :hover). The code is very simple and exactly what you'd expect, i think, but i'm happy to post if the answer isn't obvious.
Edit: Chrome-related? It actually looks fine on Safari
Any ideas?
Edit: relevant code (i think):
<div class="col-sm-6">
<canvas class="preview-canvas">
</canvas>
<div class="rollover-overlay">
<h1 class="game-title">NAME</h1>
<a class="play-button">play</a>
</div>
</div>
--
.col-sm-6 {
position: relative;
}
.rollover-overlay {
/* width and height set dynamically */
background-color: transparent;
position: absolute;
top: 0;
left: 15;
text-align: center;
transition: background-color 300ms;
}
.game-title {
opacity: 0;
transition: opacity 300ms;
}
a.play-button {
opacity: 0;
background-color:transparent;
transition: opacity 300ms, color 100ms, border-color 100ms;
}
.rollover-overlay:hover {
background-color: rgba(0, 0, 0, .5);
}
.rollover-overlay:hover .game-title,
.rollover-overlay:hover a.play-button {
opacity: 1;
}
--
I'm trying to crossfade image divs in succession upon hovering another div. I'm missing something however, as it's not changing the image upon hover and is instead fading in and out the same div. Any help would be greatly appreciated.
Here's a fiddle.
$('.card').hover(function() {
var delay = 0;
$('.fade-m').each(function() {
var $fade = $(this);
$fade.find(".front").fadeOut();
$fade.find(".back").fadeIn();
setTimeout(function() {
$fade.find(".back").fadeOut();
$fade.find(".front").fadeIn();
}, delay += 500);
});
});
.fade-m {
position: relative;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
}
.fade {
border: 1px solid red;
}
.front {
display: block;
z-index: 2;
}
.back {
position: absolute;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
<div class="hover-text">
<h3>hover text</h3>
</div>
</div>
<span class="fade-m">
<div class="front">
<img src="http://lorempixel.com/50/50">
</div>
<div class="back">
<img src="http://lorempixel.com/60/60">
</div>
</span>
<span class="fade-m">
<div class="front">
<img src="http://lorempixel.com/50/50">
</div>
<div class="back">
<img src="http://lorempixel.com/60/60">
</div>
</span>
I believe this is what you want, but it doesn't use jQuery, just pure CSS3. You may need to run the CSS through an autoprefixer if you want to support browsers that don't support unprefixed versions of some of the properties.
.fade-m {
position: relative;
display:block;
}
/* Make all transtions on the img last .5 seconds */
.fade-m img {
transition: 0.5s all;
}
/* place the back img in the same spot as the front img */
.fade-m .back img {
position: absolute;
top: 0;
}
/* Make sure the front img is always on top of the back img */
.fade-m .front img {
position: relative;
z-index: 2;
opacity: 1;
}
/* Change opacity of the front img to 0 on hover */
.card:hover ~ .fade-m .front img {
opacity: 0;
}
/* Delay the transition on hover of the second .fade-m by .5 seconds */
.card:hover + .fade-m + .fade-m img {
transition-delay: .5s;
}
<div class="card">
<div class="hover-text">
<h3>hover text</h3>
</div>
</div>
<span class="fade-m">
<div class="front">
<img src="http://lorempixel.com/g/50/50">
</div>
<div class="back">
<img src="http://lorempixel.com/50/50">
</div>
</span>
<span class="fade-m">
<div class="front">
<img src="http://lorempixel.com/g/50/50">
</div>
<div class="back">
<img src="http://lorempixel.com/50/50">
</div>
</span>
Cleaner version:
/* Only if you don't have similar in your normalize.css/reset.css */
.card ul { padding: 0; }
.card li {
position: relative;
height: 50px;
}
/* Make all transtions on the img last .5 seconds */
.card img {
transition: 0.5s all;
}
/* place images in the same spot and visible */
.card li img {
position: absolute;
top: 0;
left: 0;
opacity: 1;
}
/* Make sure the front img is always on top of the back img */
.card img:first-child {
z-index: 2;
}
/* Change opacity of the front img to 0 on hover */
.card:hover img:first-child {
opacity: 0;
}
/* Use this instead if you want the hover to only work on the h3 and not the entire card
.card h3:hover + ul img:first-child {
opacity: 0;
}*/
/* Delay the transition on hover of the second .fade-m by .5 seconds */
.card:hover li:nth-child(2) img {
transition-delay: .5s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<div class="card">
<h3>hover text</h3>
<ul>
<li>
<img src="http://lorempixel.com/g/50/50">
<img src="http://lorempixel.com/50/50">
</li>
<li>
<img src="http://lorempixel.com/g/50/50">
<img src="http://lorempixel.com/50/50">
</li>
</ul>
</div>
As the comments have mentioned, nobody is really clear on what exactly it is that you are looking for. I took a shot at it, but it was a shot in the dark at best.
setTimeout();
is non-blocking, so it will not delay the execution of a loop or iterator like you have it in your original code. You have to wrap the function to execute in the setTimeout() or setInterval() and stop it when you reach the end of the list of items.
Here's what I came up with based on what I think you are wanting:
http://jsfiddle.net/shzBu/11/
Let me know if that's the effect you were looking for.
EDIT - I misunderstood what you wanted
Check out this site for crossfading CSS3 transitions! http://css3.bradshawenterprises.com/cfimg/
I've been working on finding a way to change out this <img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" by using a :hover with an image called repair_h.svg. What I initially was doing was placing a :hover on #repair like so #repair :hover and giving repair a background-image:url but this was not working and I think there are a few reasons why.
That was my initial process...Since that did not work I did some research on how to achieve this correctly and found a way to achieve it with JS. Which is way less hackie than some other css and html solutions I was looking into.
Using JS ended up working great for the purpose of what I need done although there's one piece that I'd like to add to this and I'm not quite sure how to do it.
I'd like to add a smooth transition between the image's when hovered on.
LINK TO MY CURRENT BUILD http://kapena.github.io/pp_web/
The icon I am working on here is called Repair Services
HTML
<li>
<a href="#">
<img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg"
onmouseover="this.src='http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg'"
onmouseout="this.src='http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg'" border="0" alt="About Plumbing Repairs in Honolulu Hawaii">
</img>
</a>
</li>
JS
function hover(element) {
element.setAttribute('src', 'http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg');
}
function unhover(element) {
element.setAttribute('src', 'http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg');
Also if any of you have any suggestions on away to perform a this entire task without JS and entirely with HTML and CSS then I'd be open to seeing how you'd do it :)
Thanks
You can do something like this with markup and css only:
HTML:
<a href="#">
<img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" border="0"
alt="About Plumbing Repairs in Honolulu Hawaii" />
</a>
CSS:
a {
background:url('http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg') 0 0 no-repeat;
width:150px;
margin:0;
padding:0;
float:left;
}
a img {
opacity:1;
transition:opacity .5s;
float:left;
}
a:hover img {
opacity:0;
transition:opacity .5s;
}
Demo
In CSS you cannot transition/animate directly between two images becuase CSS is incapable of interpolating keyframes between two none value-scale values.
That said, there are a few approaches using only CSS.
If you need to keep the same element/id the images are being transitioned on, the only approach would be to replace the image with a non-replaced element so you can use pseudo elements, then do e.g.:
span {
display: inline-block;
position: relative;
}
span:before,
span:after {
display: inline-block;
height: 300px;
width: 300px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
span:before {
content: url(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg);
}
span:after {
opacity: 1;
transition: opacity 200ms ease-in;
content: url(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg);
}
span:hover:after {
opacity: 0;
}
<span></span>
Alternatively if this isnt a consideration, a common approach is to overlap two images and transition the opacity of the correct image on hover, revealing the image underneath.
div:hover img:last-of-type {
opacity: 1;
transition: opacity 200ms ease-in;
}
div:hover img:last-of-type {
opacity: 0;
}
div img {
position: absolute;
top: 0;
left: 0;
}
<div>
<img src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" />
<img src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg" />
</div>
If you remove the blue background from the image(s) and keep it transparent, you can do this easily with css:
<style type="text/css">
ul {
list-style: none;
}
a {
display: inline-block;
width: 230px;
height: 240px;
background-color: #8bdafc;
/* background-image: url(/path/to/img/with-transparent-bg.svg) */
background-repeat: no-repeat;
-webkit-transition: background-color .3s;
-moz-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
}
a:hover {
background-color: #4fc3fb;
}
</style>
<ul>
<li>
</li>
</ul>
Don't set an src attribute on the img
<img src='' width=500 height=500>
img{
background: url("src1");
}
img:hover{
background: url("src2");
}
1) I created an image with an opacity of 1. When you hover over it, the opacity becomes .3 and a button appears over the image. The problem, is that when you hover over the button, the opacity of the image returns to 1. How can I make the opacity of the image stay .3 when the hover is both over the image OR the button?
2) When you click play, the original image changes to a new image. But since the mouse is over the image, the new image has an opacity .3. How can I set the new image to have an opacity of 1 even when its hovered?
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
$(this).addClass("hide");
});
//Restore image on mouse out
$('.show-image img').mouseout(function() {
$('img').attr("src", originalImgSrc);
$('.the-buttons').removeClass("hide");
});
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
opacity: 1;
background: white;
}
div.show-image img:hover {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
div.show-image input.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>
Here's a fiddle
Here's the answer to both of your questions.
Put the hover on the parent:
.show-image:hover img
Add the "hide" class on the parent and change the opacity that way.
$(this).parent().addClass("hide");
div.show-image.hide img{
opacity: 1;
}
To add the play button back on hover after clicking the first time you would have to remove the hide class from the parent in your mouse out function:
$('.the-buttons').parent().removeClass("hide");
change your css
from this:
div.show-image img:hover {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
to this:
div.show-image:hover img {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
Hope this helps. Full snippet:
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
$(this).addClass("hide");
});
//Restore image on mouse out
$('.show-image img').mouseout(function() {
$('img').attr("src", originalImgSrc);
$('.the-buttons').removeClass("hide");
});
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
opacity: 1;
background: white;
}
div.show-image:hover img {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
div.show-image input.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>
I removed your opacity from the CSS, and placed it within your jQuery function. I also replaced your event handler with .hover(), and targeted the parent container.
$('.show-image').hover(
function() {
$(this)
.find('img').css('opacity', '.3').end()
.find('input').show();
}, function() {
$(this)
.find('img').css('opacity', '1').attr("src", originalImgSrc).end()
.find('input').hide();
}
);
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif").css('opacity', 1);
$(this).hide();
});
$('.show-image').hover(
function() {
$(this)
.find('img').css('opacity', '.3').end()
.find('input').show();
},
function() {
$(this)
.find('img').css('opacity', '1').attr("src", originalImgSrc).end()
.find('input').hide();
}
);
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
background: white;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>
Also, note the update I made to restore opacity on clicking 'Play'.
You can use mouseover/mouseout events to add/remove class and add css to that class, I added the .hovered class.
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
$(this).addClass("hide");
});
function addHOVER() {
$('.show-image img').addClass("hovered");
}
function remHOVER() {
$('.show-image img').removeClass("hovered");
}
$(".show-image img").mouseover(addHOVER);
$(".show-image .the-buttons").mouseover(addHOVER);
$(".show-image .the-buttons").mouseout(remHOVER);
//Restore image on mouse out
$('.show-image img').mouseout(function() {
$('img').attr("src", originalImgSrc);
remHOVER();
$('.the-buttons').removeClass("hide");
});
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
opacity: 1;
background: white;
}
div.show-image img.hovered {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
div.show-image input.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>