We Keep Coding

Getting a black overlay with text when hovering over an image

I searched all over for this and I found a couple of solutions, but I cannot get this to work in my application. What I am trying to do is to get a black-overlay over an image when hovered over and then text to appear. Ideally I want the text to have a border that looks like a button.
I want this to work with my scale on hover as well. For some reason on my actual page, when hovering over an image, it does nothing but scale. It doesn't turn the parent div the gray color.
What am I doing wrong?
$('.home-img-block').find('img').each(function() {
var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
console.log(imgClass);
$(this).addClass(imgClass);
});
#home-img-blocks {
width: 100%;
height: 600px;
}
.home-img-block {
width: 33.33%;
/*height: 100%;*/
display: inline-block;
overflow: hidden;
cursor: pointer;
}
.home-img-block:after {
content: attr(data-content);
color:#fff;
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.home-img-block:hover:after {
opacity:1;
}
.home-img-block img{
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.home-img-block:hover img{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
background: rgba(0,0,0,0.3);
width: 33.33%;
max-height: 100%;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div data-content="FIND OUT MORE" class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">
</div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>
</div>

Hope this is what you want. Check this out. Added an overlay class for black overlay.
$('.home-img-block').find('img').each(function() {
var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
console.log(imgClass);
$(this).addClass(imgClass);
});
* {
box-sizing: border-box;
}
#home-img-blocks {
width: 100%;
height: 600px;
}
.home-img-block {
width: 33.33%;
float: left;
/*height: 100%;*/
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:hover .overlay {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.home-img-block:after {
content: attr(data-content);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
border: 1px solid #fff;
padding: 5px;
text-align: center;
}
.home-img-block:hover:after {
opacity: 1;
}
.home-img-block img {
-webkit-transition: all 1s ease;
/* Safari and Chrome */
-moz-transition: all 1s ease;
/* Firefox */
-ms-transition: all 1s ease;
/* IE 9 */
-o-transition: all 1s ease;
/* Opera */
transition: all 1s ease;
}
.home-img-block:hover img {
-webkit-transform: scale(1.25);
/* Safari and Chrome */
-moz-transform: scale(1.25);
/* Firefox */
-ms-transform: scale(1.25);
/* IE 9 */
-o-transform: scale(1.25);
/* Opera */
transform: scale(1.25);
background: rgba(0, 0, 0, 0.3);
width: 33.33%;
max-height: 100%;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
width: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div data-content="FIND OUT MORE" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="overlay"></div>
</div>
<div data-content="FIND OUT" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test2.jpg">
<div class="overlay"></div>
</div>
<div data-content="FIND" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test3.jpg">
<div class="overlay"></div>
</div>
</div>

You are missing a few things in your css this is why you are not getting the desired affect that you are looking for. You needed to add position relative to the .home-img-block class and then some of your stuff was just placed wrong giving a wierd shaking thing when hovering over it.
Here is a link to jsfiddle so you can mess around with it :
https://jsfiddle.net/kriscoulson/y32ekgdm/
#home-img-blocks {
width: 100%;
height: 600px;
}
.home-img-block {
width: 33.33%;
/*height: 100%;*/
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:after {
content: attr(data-content);
color:#fff;
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.home-img-block:hover:after {
opacity:1;
}
.home-img-block img{
-webkit-transition: all 1s ease; Safari and Chrome
-moz-transition: all 1s ease; Firefox
-ms-transition: all 1s ease; IE 9
-o-transition: all 1s ease; Opera
transition: all 1s ease;
}
.home-img-block:hover img{
transform:scale(1.25);
background: rgba(0,0,0,0.3);
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}

It seems like an issue with the css. Mainly at these points:
home-img-block:hover img
and
.home-img-block img
Since, .home-img-block is wrapping the HTML. You dont have to be specific. And plus the first CSS line for hover set seems to be wrong. I have forked the code to a fiddle.
https://jsfiddle.net/kuape5np/
Could you confirm, is that you wanted?

Check this out I hope you are looking for same
.home-img-block {
width: 33.33%;
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:hover:after {
opacity:1;
}
.home-img-block img{
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
width: 100%;
}
.home-img-block:hover img{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
background: rgba(0,0,0,0.3);
max-height: 100%;
}
.home-img-block:after {
background: rgba(0,0,0,.5);
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.hover {
position: absolute;
z-index: 99;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
opacity: 0;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.hover h2 {
color:#fff;
opacity: 0;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.home-img-block:hover:after,.home-img-block:hover .hover, .home-img-block:hover .hover h2 {
opacity: 1;
}
<div id="home-img-blocks">
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="hover">
<h2>FIND OUT MORE</h2>
</div>
</div>
</div>

CSS transition on transparent images

I have three images (transparent pngs)
which are stacked using following html/css
<div style="position: relative; left: 0; top: 0;">
<img src="img/main.png" style="position: absolute; top: 0; left: 0;" />
<img src="img/middle.png" style="position: absolute; top: 0; left: 0;"/>
<img src="img/center.png" style="position: absolute; top: 0; left: 0;"/>
</div>
to get this:
I want to add hover effect on each of these images(zoom in, border, opacity etc).
A normal CSS for a zoom in on hover would be:
img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
img:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
which doesn't work in this case because the hover effect gets applied to the whole image not just the image part (images have transparent background).
My question is, is it possible to style transparent images with CSS that are of irregular shapes?
jsfiddle here: http://jsfiddle.net/h4mxysw5/
Edit:
There seems to be a confusion. I do not want to zoom all three images at once.
For example - when hovered over the center image, I want just the center image to zoom (not all).
Updated jsfiddle with border: http://jsfiddle.net/h4mxysw5/4/

Two things you have to do.
Crop you images to fit only the space need by them, not the whole container size so they don't overlap each other.
Remove the :hover from the div and add a :hover behaviour to each image by using the img selector.
Here's the example:
div {
margin: 50px; /* Just for demo purposes */
}
img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
img:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
<div style="position: relative; left: 0; top: 0;">
<img class="one" src="http://i.stack.imgur.com/bFfbC.png" style="position: absolute; top: 0; left: 0;" />
<img class="two" src="http://i.imgur.com/iEwbExs.png" style="position: absolute; top: 76px; left: 72px;"/>
<img class="three" src="http://i.imgur.com/hdwFlUv.png" style="position: absolute; top: 102px; left: 100px;"/>
</div>
Update
Check what you can do with SVGs:
path {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
transform-origin: center center;
}
path:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
<svg width="400px" height="400px">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M140.5,178 C161.210678,178 178,161.210678 178,140.5 C178,119.789322 161.210678,103 140.5,103 C119.789322,103 103,119.789322 103,140.5 C103,161.210678 119.789322,178 140.5,178 Z M141,158 C150.388841,158 158,150.388841 158,141 C158,131.611159 150.388841,124 141,124 C131.611159,124 124,131.611159 124,141 C124,150.388841 131.611159,158 141,158 Z" fill="#4BA1DF"></path>
<path d="M140,205 C175.898509,205 205,175.898509 205,140 C205,104.101491 175.898509,75 140,75 C104.101491,75 75,104.101491 75,140 C75,175.898509 104.101491,205 140,205 Z M140,189 C167.061953,189 189,167.061953 189,140 C189,112.938047 167.061953,91 140,91 C112.938047,91 91,112.938047 91,140 C91,167.061953 112.938047,189 140,189 Z" fill="#4BA1DF"></path>
<path d="M140,280 C217.319865,280 280,217.319865 280,140 C280,62.680135 217.319865,0 140,0 C62.680135,0 0,62.680135 0,140 C0,217.319865 62.680135,280 140,280 L140,280 Z M140.5,226 C187.720346,226 226,187.720346 226,140.5 C226,93.2796539 187.720346,55 140.5,55 C93.2796539,55 55,93.2796539 55,140.5 C55,187.720346 93.2796539,226 140.5,226 L140.5,226 Z" fill="#4BA1DF"></path>
</g>
</svg>

The main issue here is that all of the images you have used are the same size - So because they are sitting on top of each other, you will only ever be hovering over the top one. Just because the image is transparent it will still trigger :hover when you hover over any part of the image.
To demonstrate using your own CSS, this is how you could do it without images:
div > div {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
border:10px solid #f00;
border-radius:50%;
position: absolute;
}
.outer {
width:200px;
height:200px;
top: 25px;
left: 25px;
border:30px solid #f00;
}
.middle {
width:150px;
height:150px;
top: 60px;
left: 60px;
border:20px solid #f00;
}
.inner {
width:100px;
height:100px;
top: 95px;
left: 95px;
border:10px solid #f00;
}
div > div:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
<div style="position: relative; left: 0; top: 0;">
<div class="outer"></div><div class="middle"></div><div class="inner"></div>
</div>
And here, with a bit of tweaking you can use the same CSS but also using the images as "background-images" to give the effect you are trying to achieve.
div > div {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
border:1px solid #f00;
border-radius:50%;
position: absolute;
}
.outer {
width:280px;
height:280px;
top: 25px;
left: 25px;
background-image:url(http://i.stack.imgur.com/bFfbC.png);
}
.middle {
width:130px;
height:130px;
top: 100px;
left: 100px;
background-image:url(http://i.stack.imgur.com/Eewcq.png);
background-position:center;
}
.inner {
width:75px;
height:75px;
top: 125px;
left: 125px;
background-image:url(http://i.stack.imgur.com/VXk7A.png);
background-position:center;
}
div > div:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
<div style="position: relative; left: 0; top: 0;">
<div class="outer"></div>
<div class="middle"></div>
<div class="inner"></div>
</div>

Out of sheer curiosity if it could be done I just needed to create a CSS only version. While it doesn't use the images as the OP required, I still think, as an alternative to img and/or JS, the result is worth posting.
In the snippet you will see both an unshaded and shaded version. Please do give your comments...
(btw: tested in FF DE 44+, Chrome 46+ and IE11+ on W7)
html, body { box-sizing: border-box;
height: 100%; width: 100%; background-color: #f9f7f1;
margin: 0px; padding: 0px; border: 0px;
cursor: default }
*, *:before,
*:after { box-sizing: inherit }
.donut-button { position: relative;
width: 280px;
height: 280px;
margin: 100px auto;
cursor: pointer }
.r-outer { width: 100%; height: 100%; border-width: 55px; top: 0.0%; left: 0.0% }
.r-middle { width: 50%; height: 50%; border-width: 15px; top: 25.0%; left: 25.0% }
.r-center { width: 25%; height: 25%; border-width: 20px; top: 37.5%; left: 37.5% }
.ring { position: absolute;
border-color : hsl(205, 69%, 58%);
border-style : solid;
border-radius: 50%;
transition: all 50ms }
.ring:hover { transform: scale(1.10) }
.ring:active { transform: scale(0.95) }
/* demo extras, shadow and color manipulation during hover */
[btn] { box-shadow: inset 0 0 1px hsla(205, 69%,48%, 1), /* hide white overflow (quirk) */
inset 10px 10px 10px hsla(205, 69%, 8%,.3), /* inset shadow */
0 0 1px hsla(205, 69%,58%, 1), /* hide white overflow (ditto) */
20px 20px 10px hsla(205, 69%, 8%,.4), /* inner outside shadow */
0 0 1px hsla(205, 69%, 8%,.3) } /* outer outside shadow */
[btn]:hover { border-color: hsl(205, 69%, 62%);
box-shadow: inset 10px 10px 10px hsla(205, 69%, 8%,.4),
20px 20px 10px hsla(205, 69%, 8%,.3) }
[btn]:active { border-color: hsl(205, 69%, 54%);
box-shadow: inset 8px 8px 8px hsla(205, 69%, 8%,.5),
10px 10px 10px hsla(205, 69%, 8%,.4) }
<div id="donut-1" class="donut-button">
<div class="ring r-outer"></div>
<div class="ring r-middle"></div>
<div class="ring r-center"></div>
</div>
<div id="donut-2" class="donut-button">
<div btn class="ring r-outer"></div>
<div btn class="ring r-middle"></div>
<div btn class="ring r-center"></div>
</div>

With JavaScript, you can hard-code the hovering areas as follows:
JavaScript
function animateCircles(obj) {
var x = window.event.x - obj.offsetLeft;
var y = window.event.y - obj.offsetTop;
var img1 = document.getElementById('1');
var img2 = document.getElementById('2');
var img3 = document.getElementById('3');
var centerR = 45;
var middleR = 75;
if (x >= img3.offsetLeft + (img3.offsetWidth / 2 - centerR) &&
x <= img3.offsetLeft + (img3.offsetWidth / 2 + centerR) &&
y >= img3.offsetTop + (img3.offsetHeight / 2 - centerR) &&
y <= img3.offsetTop + (img3.offsetHeight / 2 + centerR))
img3.className += " onhover";
else
img3.className = "normal";
if (x >= img2.offsetLeft + (img2.offsetWidth / 2 - middleR) &&
x <= img2.offsetLeft + (img2.offsetWidth / 2 + middleR) &&
y >= img2.offsetTop + (img2.offsetHeight / 2 - middleR) &&
y <= img2.offsetTop + (img2.offsetHeight / 2 + middleR))
img2.className += " onhover";
else
img2.className = "normal";
if (x >= img1.offsetLeft &&
x <= img1.offsetLeft + img1.offsetWidth &&
y >= img1.offsetTop &&
y <= img1.offsetTop + img1.offsetHeight)
img1.className += " onhover";
else
img1.className = "normal";
}
Where you specify the size of the hover 'squares' (center of the images from which the hovering should take place) with the variables centerR and middleR. Note that you can also improve this code to enlarge the hovering area as the images grow as well, such that the images only shrink when you hover outside of the enlarged image. Note that I've soft-coded all the widths and heights of the images on purpose: this allows for greater flexibility if you ever decide to change the pictures.
With the following HTML:
<div style="position: relative; left: 0; top: 0;">
<img id="1" src="http://i.stack.imgur.com/bFfbC.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
<img id="2" src="http://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
<img id="3" src="http://i.stack.imgur.com/VXk7A.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
</div>
and CSS:
.normal {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.onhover {
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
}
This yields the following result:
> DEMO

Try Pixel Selection: a JQuery library that can handle transparency in hovering.
$(function() {
$('img').Pixelselect({
over: function(e, obj, hit) {
if (hit) {
obj.addClass('hover');
} else {
obj.removeClass('hover');
}
e.preventDefault();
},
out: function(e, obj) {
obj.removeClass('hover');
e.preventDefault();
},
sublayers: true
})
})
img {
-webkit-transition: all 1s ease;
/* Safari and Chrome */
-moz-transition: all 1s ease;
/* Firefox */
-ms-transition: all 1s ease;
/* IE 9 */
-o-transition: all 1s ease;
/* Opera */
transition: all 1s ease;
opacity: 1;
}
img.hover {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: relative; left: 0; top: 0;">
<img src="http://i.stack.imgur.com/80Jxj.png" style="position: absolute; top: 0; left: 0;" />
<img src="http://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" />
<img src="http://i.stack.imgur.com/VXk7A.png" style="position: absolute; top: 0; left: 0;" />
</div>
(This won't work create with scaling the image, as the hover area will change, also the images need to be on the same domain)

Demo
I have used z-index for three div's and each div has background-image
/*Largest Circle*/ Div1=z-index:1
/*second Circle*/ Div1=z-index:2
/*Middle Small Circle*/ Div1=z-index:3
z-index is basically is used to stack it so Middle Circle is at top,second circle is in between Largest Circle and Middle Small Circle, Largest Circle is at last this does not influence mouse hover on other circle, since all circle is larger then circle above from it(in z-index) so they are visible and hoverable. Div id allImg is used to set align, size since all children div to allImg have width,height in percentage they will automatically resize
/*Outer Div use for alignment and to set size*/
#allImg{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
top:100px;
}
/*Styling appling to all desendant div inside allImg*/
#allImg > div{
position:absolute;
padding: 0px;
-webkit-transition: all 1s ease;/* Safari and Chrome */
-moz-transition: all 1s ease;/* Firefox */
-o-transition: all 1s ease; /* IE 9 */
-ms-transition: all 1s ease;/* Opera */
transition: all 1s ease;
position: absolute;
padding: 0px;
transition: all 1s ease 0s;
border: 1px solid #000;
border-radius: 100px;
}
/*Div with smallest z-index i.e outer circle*/
#img1{
background-image: url('http://i.stack.imgur.com/GWShR.png');
background-size: 100% 100%;
width: 100%;
height: 100%;
z-index: 1;
}
#img1:hover{
-moz-transform: scale(1.25);/* Firefox */
-webkit-transform:scale(1.25); /* Safari and Chrome */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
/*Div with greater z-index then Outer circle i.e 2nd circle*/
#img2{
background-image: url("http://i.stack.imgur.com/eWisy.png");
background-size: 100% 100%;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index:2;
}
#img2:hover{
-moz-transform: scale(1.16);/* Firefox */
-webkit-transform:scale(1.16); /* Safari and Chrome */
-ms-transform:scale(1.16); /* IE 9 */
-o-transform:scale(1.16); /* Opera */
transform:scale(1.16);
}
/*Div with greatest z-index i.e middle circle*/
#img3{
background-image: url("http://i.stack.imgur.com/VjygS.png");
background-size: 100% 100%;
width: 30%;
height: 30%;
left: 35%;
top: 35%;
z-index:3;
}
#img3:hover{
-moz-transform: scale(1.13);/* Firefox */
-webkit-transform:scale(1.13); /* Safari and Chrome */
-ms-transform:scale(1.13); /* IE 9 */
-o-transform:scale(1.13); /* Opera */
transform:scale(1.13);
}
<div id="allImg">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</div>
Also Note that you need to Crop image it to actual size as said by #Dave Gomez

I think you need =>
JSFiddle demo :)
div:hover > img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}

One solution possible could be :
(using The HTML map element)
var vi = function(el) {
var imgEl = document.getElementById(el.getAttribute('data-img'));
if(imgEl) imgEl.classList.add('effectOn');
}
var vo = function(el) {
var imgEl = document.getElementById(el.getAttribute('data-img'));
if(imgEl) imgEl.classList.remove('effectOn');
}
img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
img.effectOn {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
<div style="position: relative; left: 0; top: 0;">
<img id='main' src="http://i.stack.imgur.com/80Jxj.png" style="position: absolute; top: 0; left: 0;" usemap='#main' />
<img id='middle' src="http://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" usemap='#main'/>
<img id='center' src="http://i.stack.imgur.com/VXk7A.png" style="position: absolute; top: 0; left: 0;" usemap='#main'/>
<map id="main">
<area shape="circle" onmouseover='vi(this)' onmouseout='vo(this)' data-img='center' coords="147,147,58" />
<area shape="circle" onmouseover='vi(this)' onmouseout='vo(this)' data-img='middle' coords="147,147,90" />
<area shape="circle" onmouseover='vi(this)' onmouseout='vo(this)' data-img='main' coords="147,147,147" />
</map>
</div>
You can use this way on any kind of forms, rect, triangle, poly ...
The most difficult is to delimit the map, but there is various software that can help you with that (GIMP do that).

As said in the comment just one image and the other 2 only with html/css.
Here the fiddle, hope the effect you need is this :)
https://jsfiddle.net/keypaul/8dr25184/
HTML
<div id="wrap">
<div></div>
<div></div>
<img src="http://i.stack.imgur.com/bFfbC.png" alt="" />
</div>
CSS
#wrap {
position:relative;
width:280px;
height:280px;
}
#wrap img{
position:relative;
max-width:100%;
height:auto;
top:0;
left:0;
z-index:1;
transform: scale(1);
transition: 0.4s;
}
#wrap img:hover {
transform:scale(1.25);
}
#wrap div:nth-child(1){
background: transparent;
border: 15px solid red;
border-radius: 100px;
height: 99px;
left: 75px;
overflow: hidden;
position: absolute;
top: 77px;
width: 99px;
z-index: 2;
transform: scale(1);
transition: 0.4s;
}
#wrap div:hover:nth-child(1){
transform: scale(1.5);
}
#wrap div:nth-child(2){
background: transparent;
border: 20px solid red;
border-radius: 40px;
height: 34px;
left: 103px;
overflow: hidden;
position: absolute;
top: 105px;
width: 34px;
z-index: 3;
transform: scale(1);
transition: 0.4s;
}
#wrap div:hover:nth-child(2){
transform: scale(1.5);
}
You need only to delete inner little circle from the big png, change color of internal donuts and add vendor prefix in the css.

What is this jQuery "on-mouse-over-scroll-the-image" plugin?

I came across this functionality
http://themes.leap13.com/wiz/
where if you hover the mouse over a box, the image will start scrolling within that box.
How does this plugin is called? Any code examples on how to do it?

This can be achieved without any jquery. For instance
.screen {
width: 500px;
height: 300px;
display: inline-block;
margin: 10px;
padding-top: 12px;
position: relative;
margin-bottom: 80px;
text-decoration: none;
}
.screen div {
display: inline-block;
width: 500px;
height: 300px;
background-position: center top;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
.screen:hover div {
background-position: center bottom;
-webkit-transition: all 10s;
-moz-transition: all 10s;
-ms-transition: all 10s;
-o-transition: all 10s;
transition: all 10s;
}
.screen h2,
.screen h2 a {
font-size: 17px;
color: #fff;
font-weight: 300;
position: absolute;
bottom: -40px;
text-align: center;
width: 100%;
}
<div class="screen">
<div style="background-image:url(http://themes.leap13.com/wiz/wp-content/uploads/2014/10/restaurant-wiz1.jpg);"></div>
<h2>Some text</h2>
</div>
Basically all you need is a long image, and you add a transition on it to make it move up on hover (you're changing background position).
You could add easing to this, delay on hover, what ever your heart desires :D (within the realm of available CSS3 code ofc).

Expand the logo from a half

has anyone any idea if you can do this in jquery? Where clicking on a piece of the logo expands the rest? Example image:

Why use jQuery if this can be achieved using CSS?
HTML:
<div id='icon-wrapper'>
<img id='icon' alt='icon' src='http://i.stack.imgur.com/sKhJf.jpg?s=60&g=1'/>
<p>Text here</p>
</div>
CSS:
#icon-wrapper{
margin:0 auto;
height:110px;
width:110px;
overflow:hidden;
/* CSS Transitions */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#icon-wrapper:after{
content:"";
display:block;
width:100%;
clear:both;
}
#icon-wrapper:hover{
width:300px;
}
#icon-wrapper:hover #icon{
margin-left:200px;
}
#icon{
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
/* Position Absolute to put the icon on the top */
position:absolute;
z-index:10;
/* CSS Transitions */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#icon-wrapper p{
color:black;
font-size:35px;
font-family:arial, helvetica;
/* Fixed width and float left is needed */
width:200px;
float:left;
}
It's long but without using jQuery is a plus point.
Note that we need to use fixed width for the elements, especially for the paragraph.
UPDATE:
For transparent icon, we need to hide the text first, using opacity:0;. Then add CSS Transition so we have smooth effect on hover. Finally, show the text on hover with opacity:1;. But this trick has a bug, sometimes the text didn't 'hide' fast, so it's still shown for a time in the icon. The best solution is adding a background color to the icon, using the same color as the container background.
Updated CSS (transparent text):
#icon-wrapper:hover p{
opacity:1;
}
#icon-wrapper p{
/* ... */
opacity:0;
-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-ms-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
transition: all 2s ease-in;
}
Updated CSS (using background color on the icon):
#icon{
/* ... */
background:white;
}
Here is a jsFiddle
Here is an updated fiddle for transparent icon.
Here is an updated fiddle with background color added to the icon.

Not sure if this is something you want.
Check the demo here: http://jsfiddle.net/SdanM/4/
HTML:
<div id="container">
<div id="img">Hidden Element</div>
<div id="btn">Hover to expand</div>
<div>
CSS: hide the hidden element first
#container {
position: relative;
}
#img {
background-color: yellow;
position: absolute;
width: 100px;
height: 50px;
top: 50px;
left: 50px;
display: none;
}
#btn {
background-color: red;
position: absolute;
width: 50px;
height: 50px;
top: 50px;
left: 50px;
}
jQuery: move the blocks
$("#container").mouseenter( function() {
$("#img").animate({
left: "-=50",
width: "show",
}, 1000);
$("#btn").animate({
left: "+=50",
}, 1000);
});
$("#container").mouseleave( function() {
$("#img").animate({
left: "+=50",
width: "hide",
}, 1000);
$("#btn").animate({
left: "-=50",
}, 1000);
});

.animate() function in jQuery doesn't work sliding images

Code:
$("#previous_image").click(function(){
$("#images").animate({"right": "+=250px"}, "slow");
return false;
});
When i run a console.log i get into the click function, so that ain't a problem. It seems my div just doesn't want to get animated.
My CSS code (SASS)
#images_container{
display: block;
margin-left: 39px;
width: 630px;
height: 81px;
overflow: hidden;
}
#images{
display: block;
width: 1500px;
min-width: 650px;
img{
margin-top: 7px;
display: inline-block;
height: 66px;
cursor: pointer;
filter: url(svg/filters.svg#grayscale);
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Google Chrome & Safari 6+ */
transition: filter .3s ease-in-out;
-moz-transition: filter .3s ease-in-out;
-webkit-transition: filter .3s ease-in-out;
transition: -webkit-filter .3s ease-in-out;
-moz-transition: -webkit-filter .3s ease-in-out;
-webkit-transition: -webkit-filter .3s ease-in-out;
#include transition-property(-webkit-filter);
#include transition-duration(.3s);
#include transition-timing-function(ease-out);
&:hover{
filter: none;
-webkit-filter: grayscale(0);
}
}
Any toughts? It's freaking me out.
Cheers.
W.

You shouldn't need the +=
Try this:
$("#previous_image").click(function(){
$("#images").animate({"right": "250px"}, "slow");
return false;
});
Also to use right and left you need an absolutely positioned element. In order to position something absolutely you need it's container to be position relatively.
So change your css to this:
#images_container{
display: block;
margin-left: 39px;
width: 630px;
height: 81px;
overflow: hidden;
position: relative;
}
#images{
display: block;
width: 1500px;
min-width: 650px;
position: absolute;
}