Develop Reference

on hover "animate" image

my scenario: I have basic image 100x50px. I have one hover jpeg image 300x150 px and it has 9 areas (3x3, each area is 100x50 px and has another image inside). Until there is no on hover event, just another image is shown. Now I am trying to do that on hover these 9 areas changes one by one after 0.3second in cyclic way. Once mouse is not on hover, first image appears back.
<div class="thumb">
<a href="click.php"><img src="image.jpg">
<img class="hovered" src="hover.jpg" style="margin-top: 0%; margin-left: 0%; display: none;">
</a>
</div>
<div class="thumb">
<a href="click.php"><img src="another.jpg">
<img class="hovered" src="hovX.jpg" style="margin-top: 0%; margin-left: 0%; display: none;">
</a>
</div>
how could I do this please?
(I think I should somehow call javascipt function to display hovered class and start changing position of image each 0.3s. But no idea how..)
MY IMAGES:
first image without hover:
3x3 hover source image:
on hover images cycle like this:
then after 0.3s
then after another 0.3s
etc
(numbers are just for reference)
final effect should look like when mouse on hover:
when mouse is not on hover then this image is shown

You could achieve this using css.
First, put the images into a container element.
<div id="img-container">
<div class="hover-img"/>
<div class="hover-img"/>
<div class="hover-img"/>
<div class="hover-img"/>
<div class="hover-img"/>
<div class="hover-img"/>
<div class="hover-img"/>
<div class="hover-img"/>
<div class="hover-img"/>
</div>
Now you can set the size and background image of each element in css:
#img-container {
width: 300px;
height: 150px;
}
.hover-img {
width: 100px;
height: 50px;
display: inline-block;
background-image: url('image.jpg');
background-size: cover;
transition: background-image 0.3s;
}
I added a transition of 0.3 seconds to the background image so the image will change gradually when we hover over the container. To apply the change on mouse hover, we can set a different image for the hover state of the container. This means that every image will transition to the new image when the container div is hovered over.
#img-container:hover>.hover-img {
background-image: url('hover.jpg');
}
Now you want each image to change one-by-one. To do this, you can add a transition delay. You can use css nth-child to target each image directly, though this is a bit long winded and might be better done programmatically with javascript.
.hover-img:nth-child(2) {
transition-delay: 0.3s;
}
.hover-img:nth-child(3) {
transition-delay: 0.6s;
}
.hover-img:nth-child(4) {
transition-delay: 0.9s;
}
.hover-img:nth-child(5) {
transition-delay: 1.2s;
}
.hover-img:nth-child(6) {
transition-delay: 1.5s;
}
.hover-img:nth-child(7) {
transition-delay: 1.8s;
}
.hover-img:nth-child(8) {
transition-delay: 2.1s;
}
.hover-img:nth-child(9) {
transition-delay: 2.4s;
}
I'm not sure if this exactly what you want but I hope it gives some idea of how you could achieve what you want using pure css.

Is this what you meant (but with images)? You can use onmousover and onmouseout attributes to trigger your animation.
const container = document.getElementById("container");
//instead of colors you'd use source urls
const colors = ["blue","red","green","orange","pink","gold","purple","brown","yellow"];
for (let i = 0; i < 9; i++) {
const div = document.createElement("div");
//instead of color you'd add src attribute
div.style.backgroundColor = colors.shift();
div.classList.add("square");
if(i === 0) div.classList.add("active");
container.append(div);
}
let interval;
function animation() {
let i = 2;
container.children[0].classList.toggle("active")
container.children[1].classList.toggle("active");
interval = setInterval(()=>{
if(container.children[i]) {
container.children[i - 1].classList.toggle("active")
container.children[i].classList.toggle("active");
i++
} else {
container.children[0].classList.toggle("active")
container.children[i - 1].classList.toggle("active")
i = 1;
}
},300)
}
function reset() {
clearInterval(interval);
for(let i = 0; i < container.children.length; i ++){
const child = container.children[i];
if(child.classList.contains("active")) child.classList.toggle("active");
if(i === 0)child.classList.toggle("active");
}
}
#container {
width: 300px;
height: 150px;
display: flex;
flex-wrap: wrap;
cursor: pointer;
}
.square {
width: 100px;
height: 50px;
opacity: 0;
pointer-events: none;
}
.active {
opacity: 1;
}
<div id="container" onmouseover="animation()" onmouseout="reset(this)"></div>

Pop out image html

I am developing a chrome extension which on any hover over an image it should popout a box over the image and the image should be zoomed to 1.5 times the original image.
So I started working on examples and found a similar example like this.
.zoomin img {
height: 200px;
width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.zoomin img:hover {
width: 300px;
height: 300px;
}
<div class="zoomin">
<img src="http://www.corelangs.com/css/box/img/zimage.png" title="All you need to know about CSS Transitions " />
</div>
But instead i need to create a box without zooming the image on hover. So in my exercise using this Using only CSS, show div on hover over <a> i have developed this.
main.js
div {
display: none;
}
img:hover + div {
display: block;
height : 200px;
width : 300px;
}
But the problem is that the size of the image should be dynamically adjusted based on the image we are hovering.
Is there a way to make this work when we hover over an image it should automatically make a div which should hold 1.5 times the dimensions of the image.Any suggestions.?Please help
I have included the screenshot below for reference.

img:hover div {
display: block;
var img = document.getElementById('imageid');
// get the image dimensions using this id
var width1 = img.clientWidth;
var height1 = img.clientHeight;
height : width * 1.5;
width : height * 1.5;
}

You need to just remove
+
because it selects immediate next div element to img.
I guess you should try:
img:hover ~ div
{
//your height and width goes here
}

I think this is the sort of thing you wanted.
I don't think you can do this with CSS only (though would love to be wrong)
I've done a for loop to add an event listener on for when you mouse over and off an image in .zoomin. Then it sets the image source accordingly.
var zoominSel = document.querySelectorAll(".zoomin img");
var zoomContSel = document.querySelector(".zoomcont img")
for (let i = 0; i < zoominSel.length; i++) {
zoominSel[i].addEventListener("mouseover", function(event) {
zoomContSel.setAttribute('src', event.target.getAttribute('src'));
zoomContSel.style.width = event.target.offsetWidth + "px";
zoomContSel.style.height = event.target.offsetHeight + "px";
zoomContSel.parentElement.style.top = event.target.offsetTop + "px";
zoomContSel.parentElement.style.left = (event.target.offsetLeft + event.target.offsetWidth + 2) + "px";
});
zoominSel[i].addEventListener("mouseout", function(event) {
zoomContSel.setAttribute('src', '');
});
}
body {
margin: 0;
}
.zoomin img {
max-width: 200px;
}
.zoomcont img[src=""] {
display: none;
}
.zoomcont {
z-index: 1000;
position: absolute;
transform: scale(1.5);
transform-origin: 0 0;
}
<div class="zoomin">
<img src="http://www.corelangs.com/css/box/img/zimage.png" />
</div>
<div class="zoomin">
<img src="http://usabilitygeek.com/wp-content/uploads/2013/07/free-fonts-for-commercial-personal-use.jpg" />
</div>
<div class="zoomcont">
<img src="" />
</div>
Hope you find this helpful.

jquery pan a large image within small div container using buttons

Hi there I need to an interactive element using a large image. This image sized 1000x1000 pixel with simple imagery will contain several questions with yes or no. What I want to do is place this image within a small div (say 500x300) with hidden overflow and add hotspots on the image for the yes/no option. What I want is when the user clicks yes, then the hotspot link pans to specific x/y coordinates of the same large image. Viewer will only see within the 500x300 window. So on and so forth. Is this possible? It seems so simple yet only option I can find is the pan by mouse option or iframe option with complicated divs and anchors. I'm not an expert in java/jquery but would love to find a script that is adaptable. Please help!

This sounded fun so I made a custom solution real quick. Demo here: jsBin
It's heavily reliant on the proper CSS, so check that in the bin, but here's the JS part:
var choice = document.querySelectorAll('.choice'),
image = document.getElementById('image')
for ( var i=0; i<choice.length; i++) {
choice[i].addEventListener('click', function (event) {
var x = this.dataset['x'],
y = this.dataset['y'];
image.style.top = '-'+y+'px';
image.style.left = '-'+x+'px';
})
}

Use css transitions for animation. Set up the positions you want the buttons to move the image around to in the image using a series of javascript objects. Then, set up your anchors, text, etc using absolute positioning on top of the image inside of a div container. Finally, add a click action in jQuery to assign your different positions to the top and left css of that container.
The end result, then, will be that you click an anchor, the left and top positions are assigned to the container via css in jQuery, and the transitions will slide the image around with the anchors.
I set up a fiddle here.
Here's the html from the fiddle:
<div id="window">
<div id="container">
<img src="http://upload.wikimedia.org/wikipedia/en/1/1f/Kill_The_Lights_1000x1000.jpg" id="image">
<ul>
<li><a id="city" href="#">City</a></li>
<li><a id="bottom" href="#">Bottom</a></li>
</ul>
</div>
</div>
And the CSS:
#window {
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
#window a {
position: absolute;
z-index: 2;
display: block;
padding: 10px;
background: rgba(255,255,255,.5);
}
#city {
top: 20px;
left: 20px;
}
#bottom {
top: 220px;
left: 220px;
}
#container {
-webkit-transition:left 2s, top 2s, -webkit-transform 2s;
transition:left 2s, top 2s, transform 2s;
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
}
Here's some javascript to give an example of setting up the positions as objects.
var city = {
top: -200,
left: -200
};
var bottom = {
top: -700,
left: -100
}
$('a').click(function() {
var t = this.id;
var c = $('#container');
if (typeof eval(t) !== 'undefined') {
c.css({
'top': eval(t).top,
'left': eval(t).left
});
}
});

I've just made a Fiddle with a demo image from where you could proceed.
HTML:
<div class="imgHolder">
<div class="hotspot one">Click</div>
<img src="image.jpg" />
</div>
CSS:
.imgHolder {
overflow:hidden;
width:300px;
height:300px;
position:relative;
}
.hotspot.one {
position:absolute;
top:10px;
padding:2px;
background-color:#fff;
left:10px;
}
.hotspot:hover {
cursor:pointer;
}
img {
position:relative;
z-index:-1;
}
jQuery:
$(".hotspot").on("click", function () {
$("img").animate({
"right": "+=100px"
});
});
For reference: http://api.jquery.com/animate/
You could e.g. fade hotspots in and out on specific positions and use animate() to move to the next hotspot.

How can I get only the specific H3 I am hovering over to show and not all of them?

I am trying to have text appear over each image as the user hovers over that specific image. I don't want all of the text for every image to appear when a user hovers over one image. I have it where only the one photo becomes opaque but right now the text shows up for every image when hovering over any image.
HTML:
<div class="image">
<img class="projectImage" src="images/peralta.png" alt="">
<h3 class="hiddenH3">This is a test!</h3>
</div>
SCSS:
.image {
position: relative;
width: 100%;
.projectImage {
width: 100%;
transition: all 0.5s ease-in;
}
.hiddenH3 {
display: none;
position: absolute;
top: 45%;
width: 100%;
}
}
JS:
$('.projectImage').on("mouseover", function() {
$(this).closest('.projectImage').addClass("coolEffect");
$('.hiddenH3').fadeIn(1000);
});
$('.projectImage').on("mouseout", function() {
$(this).closest('.projectImage').removeClass("coolEffect");
$('.hiddenH3').fadeOut(1000);
});

Use .next along with this
$('.projectImage').on("mouseover", function() {
$(this).addClass("coolEffect");
$(this).next(".hiddenH3").fadeIn(1000);
});
$('.projectImage').on("mouseout", function() {
$(this).removeClass("coolEffect");
$(this).next(".hiddenH3").fadeOut(1000);
});
You can also remove .closest(".projectImage") as this refers to that image.

Why don't you do this with CSS? Since the selectors needed are very old and entrenched, you can do something like this:
.projectImage + h3 {
transition: opacity 1000ms;
opacity: 0;
}
.projectImage:hover + h3 {
opacity: 1;
}
This will fade in your h3 when you hover over the project image, as long as you structure it in that way (i.e., ing, then h3). You can also remove the classes cooLEffect and hiddenh3 as we have defined that by only targeting the h3 that comes after a project image.
The fancy transition effect will only work on modern browser, but older browsers gracefully degrade.
Edit: SASS / LESS
.image {
.projectImage {
& + h3 {
transition: opacity 1000ms;
opacity: 0;
}
&:hover + h3 {
opacity: 1;
}
}
}

Make div appear and change the whole html to be darker

I have a div and after I click a button, I would like the div to appear (which I can do), but I would like the whole background to become darker too (this is inline with overlays).
I've tried using opacity - I change the opacity of the whole html with jQuery, i.e. $('html').css('opacity','-0.5'); and change back the opacity of the div to normal, but for some reason, the opacity of the div stays the same (0.5).
I don't quite like the opacity since actually it doesn't make the background darker (rather lighter).

HTML--
<a id="some-button" href="#">click me</a>
<div id="overlay-back"></div>
<div id="overlay"><span>YOUR HTML GOES HERE</span></div>
CSS--
html, body {
width : 100%;
height : 100%;
}
#overlay-back {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 5;
display : none;
}
#overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 10;
display : none;
}
JS--
$('#some-button').on('click', function () {
$('#overlay, #overlay-back').fadeIn(500);
});
Then just add your youtube video embed code to the overlay div and style it appropriately to put it where you want on the page.
Here is a demo: http://jsfiddle.net/EtHbf/1/

This can be now done even easier than before. Just use absoluted box-shadow.
#yourDIV {
box-shadow: 0px 0px 1px 5000px rgba(0,0,0,0.8);
}

First, for opacity, you don't set a negative number. $('html').css('opacity','1'); is solid and completely visible, and $('html').css('opacity','0'); is completely invisible. Anything in between (0.2, 0.5, 0.7) gets more visible the close it is to 1.
Second, to make the background darker you can do this:
Create a div that fills the screen
Set z-index on that div higher than all content
Set background to black and opacity to 0.5
Put youtube video in another div with a higher z-index than the div you just made with the black background

You'd want a 'modal' dialog. It's basically accomplished by using an underlying div and a background set.
jQuery UI supports it here: http://jqueryui.com/demos/dialog/#modal , but you can see how they do it by inspecting.

// video lightbox
$('.video_popup').height($(document).height());
// GET WINDOW SCROLLtop OFFSET
var winScrT;
$(window).scroll(function() {
winScrT = $(window).scrollTop();
});
$.getDocHeight = function() {
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
$('.play').click(function() {
$('.video_popup').height($.getDocHeight);
$('#popup').css({
top: (winScrT + 15) + 'px'
});
$('.video_popup').fadeTo(0, 0).css({
marginLeft: '0px'
}).fadeTo(600, 0.6);
});
$('.popup_close, .video_popup').click(function() {
$('.video_popup').fadeTo(600, 0, function() {
$('.video_popup').hide();
});
});
.video_popup {
position: absolute;
margin-left: -9000px;
top: 0px;
left: 0px;
background: #000;
width: 100%;
z-index: 300;
}
.popup_content {
position: relative;
margin: 50px auto;
width: 560px;
color: #fff;
}
.popup_close {
position: absolute;
right: -55px;
top: -25px;
z-index: 2000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a class="play" href="javascript:void(0);">PLAY</a></p>
<div class="video_popup">
<div class="popup_content">
<a class="popup_close" href="javascript:void(0);"><img src="_/images/close.png"></a>
<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"/>
</object>
</div>
</div>

Here's another example of this behavior, in the demo: click the "watch video" link to fade in the video and screen dimmer divs (escape to fade out)
jsfiddle demo
CSS:
#screenDimmer,#video {display:none;position:absolute;}
#screenDimmer {top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;
/* ie opacity */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);}
#video {top:50%;left:50%;margin-left:-240px;margin-top:-193px;}
HTML:
<div id="screenDimmer"></div>
<div id="video"><!-- embedded video here --></div>

hi i changed the code of someone who posted here, even though this may be solved already here is the updated code of jasper
html:
<a id="some-button" href="#">click me</a>
<div id="overlay-back"></div>
<div id="overlay"><iframe src="http://www.youtube.com/embed/08DjMT-qR9g" width="340"
height="250"></iframe><br><br><button id="close"><img
src="http://icongal.com/gallery/image/89825/remove_close_button_x_delete.png"
height="50"
width="50"></button></div>
css:
html, body {
width : 100%;
height : 100%;
}
#overlay button{
opacity:0.5;
}
#overlay button:hover{
opacity:1;
}
#overlay-back {
position : absolute;
text-align :center;
width : 100%;
height : 100%;
background : #000;
opacity : 0.75;
filter : alpha(opacity=60);
z-index : 5;
display : none;
}
#overlay {
position : absolute;
text-align :center;
width : 100%;
height : 100%;
z-index : 10;
display : none;
}
jquery:
$('#some-button').on('click', function () {
$('#overlay, #overlay-back').fadeIn(1000);
});
$('#close').on('click',function(){
$('#overlay,#overlay-back').fadeOut(1000);
});
i hope this might still help you and that this edit may be usefull to some people
added by me (close button,changed very little part of the css and used a youtube vid instead of nothing)

The simplest thing I have seen to achieve it is this:
$("#overlay").css("-webkit-filter","blur(5px)");
$("#overlay").css("-moz-filter","blur(5px)");
$("#overlay").css("-o-filter","blur(5px)");
$("#overlay").css("-ms-filter","blur(5px)");
$("#overlay").css("filter","blur(5px)");
$("#overlay").css("pointer-events", "none");
On clicking a button we have to run above steps. "overlay" is the ID of div which we want to be blur. After successful execution of script, at the end we can do this to re-enable the div:
$("#overlay").removeAttr("style");