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.
Related
I want to create animated progress as below, but the thing is it is not working properly on safari browser
The css property which I used is:
.prgoressBar {
width: 100%;
margin: 0 auto;
height: 22px;
background-color:#BBBBBB;
overflow: hidden;
}
.prgoressBar div {
height: 100%;
text-align: right;
padding: 0;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 100%;
background-color: #185A8D;
box-sizing: border-box;
color:#fff;
-webkit-transition: width 1s linear;
-moz-transition: width 1s linear;
-o-transition: width 1s linear;
transition: width 1s linear;
}
<div id="QM_progressBar" class="prgoressBar">
</div>
Try using the 'transform: scaleX()' instead of changing the width. Transform uses to run better with transition, maybe that's why Safari is freaking out.
I don't have Safari installed right now, so please check if this codepen works: https://codepen.io/thiagoberrutti/pen/GRmLzZK.
In the codepen I used transition but in this snippet I tried with animations instead, see if one of them can work on Safari:
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear forwards;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
<div class="progress-container">
<div class="progress" style="--time:5s"></div>
</div>
JSFIDDLE DEMO
I got this working for image zoom in with link on the entire div but without the opacity. The moment I add this code in line 14-16, it ceases to work for obvious reason:
background-color: rgba(0,0,0,0.4);
width: 100%;
height: 100%;
HTML
<div class="zoom-group">
<a class="zoom-link" href="#" >
<div class="zoom-block">
<img src="http://placehold.it/250x250" />
<div class="zoom-text">
Hello
</div>
</div>
</a>
</div>
CSS:
.zoom-group{
overflow:hidden;
border: 1px solid #000000;
display: block;
position: relative;
text-align: center;
height: 250px;
width: 250px;
}
.zoom-text {
position: absolute;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.4);
width: 100%;
height: 100%;
}
.zoom-block img{
max-width: 100%;
-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;
}
.zoom-link {
display: block;
}
.zoom-block 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);
}
How should I make this work? I do need the opacity layer and the zoom-in functionality plus the entire div to be clickable.
The img:hover cannot happen cause of the overlaying DIV.
Target the overall parent instead and than traverse to the image:
Simply change your last statement from .zoom-block img:hover{ to .zoom-group:hover img{
.zoom-group{
overflow:hidden;
border: 1px solid #000000;
display: block;
position: relative;
text-align: center;
height: 250px;
width: 250px;
}
.zoom-text {
position: absolute;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.4);
width: 100%;
height: 100%;
}
.zoom-block img{
max-width: 100%;
-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;
}
.zoom-link {
display: block;
}
.zoom-group: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);
}
<div class="zoom-group">
<a class="zoom-link" href="#" >
<div class="zoom-block">
<img src="http://placehold.it/250x250" />
<div class="zoom-text">
Hello
</div>
</div>
</a>
</div>
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>
I am trying to mimic this animation over my grid items in my packery grid when the user hovers over them (note the grid items contain background images):
http://thefoxwp.com/portfolio-packery-4-columns/
To do this they use the technique highlighted here:
https://jsfiddle.net/q0d2rqt0/5/
where a overlay div is hidden underneath another div to act like another layer on top of it:
.box {
position: absolute;
//background: blue;
width: 100%;
height: 100%;
background-image: url("http://lorempixel.com/380/222/nature");
}
.overlay {
position: absolute;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
background: white;
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
-o-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
}
.overlay:hover {
opacity: 1.0;
}
<div class="wrapper">
<div class="box">
</div>
<div class="overlay">
</div>
</div>
I am trying to accomplish this with my packery grid, but I am unsure how I can accomplish this because I do not know how to make my overlay div layer move along with my packery grid when it acts responsively.
I can identify the hover effect over each item in the grid fine with:
$container.on('mouseenter', ".item", function (event) {
var target = event.target;
var $target = $(target);
//code here to make the opacity adjustment to white on hover on
});
$container.on('mouseleave', ".item-", function (event) {
var target = event.target;
var $target = $(target);
//code here to make the opacity adjustment reverse when hover away
});
So I have identified the hovering mechanism here with the correct grid item no matter where its location is, but I am having trouble with the CSS to make the opacity go to white on hover without an overlay div layer.
Item Css:
.item1 {
padding: 5px;
width: 250px;
height: 250px;
-webkit-filter: saturate(1);
filter: saturate(1);
}
.item-content1 {
width: 100%;
height: 100%;
background-size: 100% 100%;
border:1px solid #021a40;
-webkit-transition: width 0.4s, height 0.4s;
-moz-transition: width 0.4s, height 0.4s;
-o-transition: width 0.4s, height 0.4s;
transition: width 0.4s, height 0.4s;
}
.item1.is-expanded {
width: 375px;
height: 400px;
}
.item1:hover {
cursor: pointer;
}
.item1:hover .item-content1 {
}
.item1.is-expanded {
z-index: 2;
}
.item1.is-expanded .item-content1 {
}
.item1.is-viewed {
opacity: 0.8;
-webkit-filter: sepia(1) hue-rotate(200deg);
filter: sepia(1) hue-rotate(200deg);
}
Any idea? Can I simply add something to image: hover with a webkit transition? Am I misunderstanding the concept of an opacity layer here since I am using a background image for my grid? The problem seems to be that background image is not animatable.
If i understand correctly,
Best practice is to use a container with 'overflow:hidden', and hide the masked content with 'transform: translate' with height equal to the container. 100% width will work responsively with any content.
codepen
css:
.container {
width: 300px;
position: relative;
margin: 0 auto;
height: 300px;
overflow:hidden;
}
.org-content {
background: red;
height: 300px;
}
.mask {
height: 300px;
top: 300px;
width: 100%;
background-color: #3aa6db;
opacity: 0;
transition: all ease-in 0s;
left: 0;
overflow: hidden;
position: absolute;
pointer-events: none;
}
.container:hover>.mask {
opacity: 1;
transition: all ease-out 0.2s;
transform: translate(0px, -300px);
transition: all ease-in 0.25s;
}
html:
<div class='container'>
<div class="mask">
masked content
</div>
<div class='org-content'>
original content
</div>
</div>
I want to add a background image to my webpage, hide it and on mouseover display the part of the image surrounding my cursor. I want to do this in jQuery, JavaScript, CSS3, HTML5. Can anyone help me with it please?
Here is a way to do it (another demo with a delay below that one):
var circle = document.getElementById('circle');
document.addEventListener('mousemove', positionCircle);
function positionCircle(e){
circle.style.left = e.clientX + 'px';
circle.style.top = e.clientY + 'px';
}
/* Basic styles for the demo */
html{
min-height: 100%;
}
body{
background-image: url(http://www.pageresource.com/wallpapers/wallpaper/cute-cat-kitty-kitten.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
min-height: 100%;
}
/* Your circle */
#circle{
padding: 2em;
position: fixed;
top: 0;
left: 0;
margin-top: -502em;
margin-left: -502em;
background: transparent; /* Show through the circle */
-moz-border-radius: 504em;
border-radius: 504em;
border: 500em solid rgba(0,0,0,.6); /* Make a huge border to hide the rest */
opacity: 0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
transition: opacity .5s ease;
}
#circle:hover{
opacity: 1;
}
<div id="circle"></div>
You can also do it with a delay, to add a visual effect:
var circle = document.getElementById('circle');
document.addEventListener('mousemove', positionCircle);
function positionCircle(e){
var event = e;
setTimeout(function(){
circle.style.left = event.clientX + 'px';
circle.style.top = event.clientY + 'px';
},70);
}
/* Basic styles for the demo */
html{
min-height: 100%;
}
body{
background-image: url(https://s3.amazonaws.com/prod_sussleimg/cbb1ee8720943f710058cd92ce376958.jpg);
background-position: 0 -5em;
background-size: cover;
background-repeat: no-repeat;
min-height: 100%;
}
/* Your circle */
#circle{
padding: 2em;
position: fixed;
top: 0;
left: 0;
margin-top: -502em;
margin-left: -502em;
background: transparent; /* Show through the circle */
-moz-border-radius: 504em;
border-radius: 504em;
border: 500em solid rgba(0,0,0,.6); /* Make a huge border to hide the rest */
opacity: 0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
transition: opacity .5s ease;
}
#circle:hover{
opacity: 1;
}
<div id="circle"></div>