We Keep Coding

Image gallery hover overlay height problem

I'm trying to recreate a google image search layout with an image hover overlay effect.
The problem I'm facing is setting the correct height of the overlay, I managed to set the correct width via jQuery but I can't seem to get the height right. I'd like the overlay to fill the entire image and not only the top.
An example of the image hover overlay effect can be found here: Image hover overlay effect
Here is my jsFiddle, hover on top of the images to see the effect.
function picRow(selector) {
masterArray = [];
// create each lineArray and push it to masterArray
$(selector).each(function () {
// get "selector" css px value for margin-bottom
// - parse out a floating point number
// - and divide by the outer width to get a decimal percentage
margin = (parseFloat($(this).css("margin-bottom"), 10)) / ($(this).outerWidth());
marginRight = margin * 100 + "%";
// subtract subtract the total child margin from the total width to find the usable width
usableWidth = (1 - ((($(this).find("img").length) - 1) * margin));
// for each child img of "selector" - add a width/height as value in the ratios array
ratios = [];
$(this).find("img").each(function () {
ratios.push(($(this).attr('width')) / ($(this).attr('height')));
});
// sum all the ratios for later divison
ratioSum = 0;
$.each(ratios, function () {
ratioSum += parseFloat(this) || 0;
});
lineArray = [];
$.each(ratios, function (i) {
obj = {
// divide each item in the ratios array by the total array
// as set that as the css width in percentage
width: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
height: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
// set the margin-right equal to the parent margin-bottom
marginRight: marginRight
};
lineArray.push(obj);
});
lineArray[lineArray.length - 1].marginRight = "0%";
// alert(lineArray[lineArray.length - 1].marginRight);
masterArray.push(lineArray);
});
$(selector).each(function (i) {
$(this).find("img").each(function (x) {
$(this).css({
"width": masterArray[i][x].width,
"margin-right": masterArray[i][x].marginRight
});
});
$(this).find(".text").each(function (x) {
$(this).css({
"width": masterArray[i][x].width,
/*"height": masterArray[i][x].height,*/
"margin-right": masterArray[i][x].marginRight
});
});
});
}
$(document).ready(function () {
picRow(".image-row");
});
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
/*width:100px;*/
display:block;
}
.text {
position: absolute;
top: 0;
color:#9CBDBE;
font-weight:bold;
font-size:30pt;
background-color:#fff;
width: 100px;
/*height: 50px;*/
text-align: center;
padding: 1%;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:0.8;
}
img {
z-index:1;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-row">
<a href="#1" class="wrapper">
<span class="text">Hover text</span>
<img src="https://source.unsplash.com/random/768x960" width="768" height="960"/>
</a>
<a href="#2" class="wrapper">
<span class="text">Hover text</span>
<img src="https://source.unsplash.com/random/1280x851" width="1280" height="851"/>
</a>
</div>

The simplest way to achieve this with CSS(refer other's answers) but if you want to do with Jquery You can do something like this. get the height of each image and apply it to their corresponding .text class.
$(selector).each(function (i) {
$(this).find("img").each(function (x) {
$(this).css({
"width": masterArray[i][x].width,
"margin-right": masterArray[i][x].marginRight
});
});
$(this).find(".text").each(function (x) {
var imgHeight = $(this).parent().find("img").height();
$(this).css({
"width": masterArray[i][x].width,
"height": imgHeight,
"margin-right": masterArray[i][x].marginRight
});
});
});
Here is the working fiddle

You can try this CSS. I give the a tag .wrapper a width and height so that it can contain the span tag. Then the span stag `.text', I displayed block it then 100% the width and height so that it will occupy the space of the a tag. And lastly, I positioned absolute the image.
Please check my css code below:
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
display:block;
height: 200px;
width: 500px;
overflow: hidden;
}
.text {
position: absolute;
top: 0;
color:#9CBDBE;
font-weight:bold;
font-size:30pt;
background-color:#fff;
/* width: 100px; */
/*height: 50px;*/
text-align: center;
/* padding: 1%; */
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
height: 100%;
width:100%;
left: 0;
border: 1px solid;
}
.text:hover {
opacity:0.8;
}
img {
z-index:1;
position: absolute;
top: 0;
left: 0;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}

I'm pretty sure this effect can be achieved in just CSS.
Here's my solution:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
* {
box-sizing: border-box;
}
.imgWrapper { position: absolute; }
.imgWrapper::before {
transition: all ease-in-out .2s;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.imgWrapper:hover::before {
background: red;
}
.imgWrapper:hover .middle {
opacity: 1;
}
.middle {
transition: all ease-in-out .2s;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: .5em;
}
.middle span {
white-space: nowrap;
}
<div class="imgRow">
<div class="imgWrapper">
<img src="https://via.placeholder.com/300x300" />
<div class="middle">
<span>Hello I am some text!</span>
</div>
</div>
</div>

add this.. i just changed text position values.
css
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
padding: 0;
width:auto;
display:inline-block;
}
.text {
position: absolute;
top: 0;
left:0;
bottom:0;
right:0;
color:#9CBDBE;
font-weight:bold;
font-size:30pt;
background-color:#fff;
width: 100px;
/*height: 50px;*/
text-align: center;
padding: 1%;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display:flex;
justify-content:center;
align-items:center;
}
.text:hover {
opacity:0.8;
}
img {
z-index:1;
}
.image-row {
width: 100%;
margin: 1% 0;
}
.image-row img {
width: 100%;
height: auto;
display: block;
font-size: 0;
float: left;
}
.image-row::after {
content: "";
display: table;
clear: both;
}

Css z-index and transform weird flash

Click on the image in snippet (expand full page) to run transform and look more closely at bottom right corner when animated card goes behind, you will see it overlaps slightly when it shouldn't. I happens when I apply z-index on each box div in CSS. If I remove z-index, there is no flash, but I need z-indexes on my box divs. Otherwise I cant have stack behave in such when I shuffle them (unless I change DOM order which I don't want). I have tried with some backface-visibility in CSS but with no luck. How could I get rid of such flash?
$('body').on('click', function() {
var box = $('#a2')
box.one("transitionend", function() {
box.css("zIndex", -1).one("transitionend", function() {
}).removeClass('t').addClass('t2')
}).addClass('t')
})
.box {
position: absolute;
width: 250px;
padding: 10px;
background: #fff;
box-shadow: 1px 1px 5px #484848;
left: 0;
top: 0;
height: 370px;
box-sizing: content-box;
transition-duration: 0.5s;
transition-timing-function: ease;
backface-visibility: hidden;
}
.box img {
display: block;
position: relative;
backface-visibility: hidden;
user-select: none;
}
#a1 {
z-index: 0;
transform: rotate(-4.5884deg);
}
#a2 {
z-index: 1;
transform: rotate(7deg);
}
.t {
transform: translateX(370px) rotate(23deg) !important;
}
.t2 {
transform: translateX(0) rotate(-7deg) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
<img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>
<div class="box" id="a2">
<img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>
Happens in all browsers from what I can see.

The fix is actually simple - just add transition-property: transform because that is what you want to transform (transition-property: all is the default and z-index is also transitioned).
See demo below:
$('body').on('click', function() {
var box = $('#a2')
box.one("transitionend", function() {
box.css("zIndex", -1).removeClass('t').addClass('t2')
}).addClass('t')
});
.box {
position: absolute;
width: 250px;
padding: 10px;
background: #fff;
box-shadow: 1px 1px 5px #484848;
left: 0;
top: 0;
height: 370px;
box-sizing: content-box;
transition-duration: 0.5s;
transition-timing-function: ease;
backface-visibility: hidden;
transition-property: transform; /* added */
}
.box img {
display: block;
position: relative;
backface-visibility: hidden;
user-select: none;
}
#a1 {
z-index: 0;
transform: rotate(-4.5884deg);
}
#a2 {
z-index: 1;
transform: rotate(7deg);
}
.t {
transform: translateX(370px) rotate(23deg) !important;
}
.t2 {
transform: translateX(0) rotate(-7deg) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
<img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>
<div class="box" id="a2">
<img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>
Why the flicker?
Note that z-index is an integer and it doesn't make much sense to transition it - the animation type is integer according to MDN:
When animated, values of the data type are interpolated
using discrete, whole steps. The calculation is done as if they were
real, floating-point numbers; the discrete value is obtained using the
floor function. The speed of the interpolation is determined by the
timing function associated with the animation.
See a sample of how you can animate z-index:
div {
position: absolute;
border: 1px solid;
}
.container div {
width: 100px;
height: 100px;
}
.container .box {
background-color: cadetblue;
z-index: 1;
animation: stack 5s infinite linear;
}
.box + div {
top: 10px;
left: 10px;
z-index: 1;
background-color: lightblue;
}
.box + div + div {
top: 20px;
left: 20px;
z-index: 2;
background-color: aliceblue;
}
#keyframes stack {
50% {
z-index: 3;
}
}
<div class="container">
<div class="box"></div>
<div></div>
<div></div>
</div>
This is why you have the flicker in your animation.

I think it is merely an order problem.
Just place the .css (" zIndex ", -1) next to the .addClass ('t'):
this way flash doesn't happen since z-index is applyed before the backward translation
$('body').on('click', function() {
var box = $('#a2')
box.one("transitionend", function() {
box.removeClass('t').addClass('t2')
}).css("zIndex", -1).addClass('t')
})

I just update your code with jQuery update. Actually i just move your box.css("zIndex", -1).addClass('t'); script in setTimeout method. Try this I hove it'll resolve your issue. Thanks
$('body').on('click', function() {
var box = $('#a2')
box.one("transitionend", function() {
box.one("transitionend").addClass('t2');
})
setTimeout(function(){
box.css("zIndex", -1).addClass('t');
})
})
.box {
position: absolute;
width: 250px;
padding: 10px;
background: #fff;
box-shadow: 1px 1px 5px #484848;
left: 0;
top: 0;
height: 370px;
box-sizing: content-box;
transition-duration: 0.5s;
transition-timing-function: ease;
backface-visibility: hidden;
}
.box img {
display: block;
position: relative;
backface-visibility: hidden;
user-select: none;
}
#a1 {
z-index: 0;
transform: rotate(-4.5884deg);
}
#a2 {
z-index: 1;
transform: rotate(7deg);
}
.t {
transform: translateX(370px) rotate(23deg) !important;
}
.t2 {
transform: translateX(0) rotate(-7deg) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
<img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>
<div class="box" id="a2">
<img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>

I tried increasing the z-index of the succeeding image and it works.
$('body').on('click', function() {
var box = $('#a2')
var i=0;
box.one("transitionend", function() {
// increase the z-index
$("#a1").css("zIndex", 99);
box.css("zIndex", -1).one("transitionend", function() {
}).removeClass('t').addClass('t2')
}).addClass('t')
})
.box {
position: absolute;
width: 250px;
padding: 10px;
background: #fff;
box-shadow: 1px 1px 5px #484848;
left: 0;
top: 0;
height: 370px;
box-sizing: content-box;
transition-duration: 0.5s;
transition-timing-function: ease;
backface-visibility: hidden;
}
.box img {
display: block;
position: relative;
backface-visibility: hidden;
user-select: none;
}
#a1 {
z-index: 0;
transform: rotate(-4.5884deg);
}
#a2 {
z-index: 1;
transform: rotate(7deg);
}
.t {
transform: translateX(370px) rotate(23deg) !important;
}
.t2 {
transform: translateX(0) rotate(-7deg) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
<img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>
<div class="box" id="a2">
<img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>

TranslateX to appear as animating

I am trying to use more css and less Javascript for animation. I am running into an issue animating three different boxes. I have the boxes fade in with opacity by adding the fadeShow class to bring the opacity to 1. However, I am wanting the boxes to appear as if they are animating from the left side of the page to the right.
Here is a fiddle that shows it in action:
Click here to see
.info-box {
border: 1px solid black;
padding: 50px;
background: #00f;
color: #fff;
display: inline;
margin: 0 100px;
transition: 1s;
opacity: 0;
}
.info-box.fadeShow {
opacity: 1;
transform: translateX(150px);
}
I am trying to make the boxes animate over 150px OR if there is a better way to do this to put the boxes into their perminent state. What I mean by this is, if the boxes are supposed to be at left: 25%;, left: 45%; and left: 65%;, then I would want the boxes to be 150px to the left of that and then transition into place.

Firstly, to have the boxes slide over from the left, you should apply the negative transformation to the .info-box class:
transform:translatex(-150px);
And then reset it in the .fadeShow class:
transform:initial;
Secondly, you have the display property of the .info-box class set to inline, you'll need to change that as transformations can't be applied to inline elements.
Finally, for performance purposes, it's best to explicitly state which properties you want to apply transitions to:
transition:opacity 1s,transform 1s;
Or:
transition-duration:1s;
transition-property:opacity,transform;

Without CSS animations and calc function:
window.addEventListener("scroll", function(event) {
var top, green, red, yellow;
top = this.scrollY;
green = document.querySelector("#green"),
red = document.querySelector("#red"),
yellow= document.querySelector("#yellow");
if(top > 100){
green.classList.add("green", "active");
red.classList.add("red", "active");
yellow.classList.add("yellow", "active");
}
}, false);
*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}
.box{
width: 150px;
height: 150px;
opacity:0;
position: absolute;
transform: translateX(-150px);
opacity:0
}
#green{
background: green;
left: 25%;
}
#red{
background: red;
left: 45%;
}
#yellow{
background: yellow;
left: 65%;
}
#green.green{transition: all .3s ease}
#red.red{transition: all .6s ease}
#yellow.yellow{transition: all .9s ease}
#green.active,
#red.active,
#yellow.active{opacity: 1;transform: translateX(0);}
<section>
<article>
<div id=green class=box></div>
<div id=red class=box></div>
<div id=yellow class=box></div>
</article>
</section>
With CSS animations and calc function:
*{box-sizing:border-box}
body{margin: 0; padding-top: 20px}
.box{
width: 150px;
height: 150px;
position: absolute
}
#green{
background: green;
left: 25%;
animation:slideinGreen .3s ease
}
#red{
background: red;
left: 45%;
animation:slideinRed .6s ease
}
#yellow{
background: yellow;
left: 65%;
animation:slideinYellow .9s ease
}
#keyframes slideinGreen {
from {
left: calc(25% - 150px); opacity: 0
}
}
#keyframes slideinRed{
from {
left: calc(45% - 150px); opacity: 0
}
}
#keyframes slideinYellow {
from {
left: calc(65% - 150px); opacity: 0
}
}
<section>
<article>
<div id=green class=box></div>
<div id=red class=box></div>
<div id=yellow class=box></div>
</article>
</section>
Now you can add EventTarget.addEventListener() and Element.classList
window.addEventListener("scroll", function(event) {
var top, green, red, yellow;
top = this.scrollY;
green = document.querySelector("#green"),
red = document.querySelector("#red"),
yellow= document.querySelector("#yellow");
if(top > 100){
green.classList.add("green", "active");
red.classList.add("red", "active");
yellow.classList.add("yellow", "active");
}
}, false);
*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}
.box{
width: 150px;
height: 150px;
opacity:0;
position: absolute
}
#green{
background: green;
left: 25%;
}
#red{
background: red;
left: 45%;
}
#yellow{
background: yellow;
left: 65%;
}
#green.green{animation:slideinGreen .3s ease}
#red.red{animation:slideinRed .6s ease}
#yellow.yellow{animation:slideinYellow .9s ease}
#green.active,#red.active,#yellow.active{opacity: 1}
#keyframes slideinGreen {
from {
left: calc(25% - 150px);opacity:0
}
}
#keyframes slideinRed{
from {
left: calc(45% - 150px);opacity:0
}
}
#keyframes slideinYellow {
from {
left: calc(65% - 150px);opacity:0
}
}
<section>
<article>
<div id=green class=box></div>
<div id=red class=box></div>
<div id=yellow class=box></div>
</article>
</section>

you need to set css transition to: transition: all 1s;
since you need to tell what properties you need to animate.
and using all means animate all css properties. also you need to set display: inline-block
.info-box {
border: 1px solid black;
padding: 50px;
background: #00f;
color: #fff;
display: inline-block;
margin: 0 100px;
transition:all 1s;
opacity: 0;
}

The transform isn't working because the child divs are set to display:inline.
Change that to inline-block.
JSfiddle Demo

Animating background color, pulse effect

I have made a script for animating my menu li element after mouseovering the a element inside it.
Everything works fine, but I want something else. I want the effect not to disappear but to linger as long as the mouse is over the a element.
What function to use?
Script so far:
jQuery(document).ready(function($){
$(".main-navigation a").mouseover(function() {
$(this).parent().animate({
backgroundColor: "green"
}, "normal"),
$(this).parent().animate({
backgroundColor: "transparent"
})
.mouseleave(function() {
$(this).parent().animate({
backgroundColor: "transparent"
}, "normal")
});
});
});
http://jsfiddle.net/neugu8r9/

You could do this using CSS's #keyframes without jQuery.
ul {
position: relative;
width: 250px;
height: 50px;
padding: 0;
margin: 0;
list-style: none;
}
li a {
width: 100%;
height: 100%;
line-height: 50px;
text-align: center;
}
li a:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
display: block;
z-index: -1;
}
li {
position: relative;
height: 50px;
width: 250px;
text-align: center;
border: 1px solid black;
}
a:hover:before {
-webkit-animation: pulse 0.8s ease-in-out infinite alternate;
animation: pulse 0.8s ease-in-out infinite alternate;
}
#-webkit-keyframes pulse {
0% {
background: transparent;
}
50% {
background: green;
}
100% {
background: transparent;
}
}
#keyframes pulse {
0% {
background: transparent;
}
50% {
background: green;
}
100% {
background: transparent;
}
}
<nav class="main-navigation">
<ul>
<li><a>Menu-item#1</a></li>
<li><a>Menu-item#2</a></li>
<li><a>Menu-item#3</a></li>
<li><a>Menu-item#4</a></li>
</ul>
</nav>

Here is the Full jQuery solution for you buddy, hope it helps:=)
jQuery(document).ready(function($){
var intervalID;
$(".main-navigation ul li a").hover(function(){
var that = $(this);
var opacityToggle = function(){
if(!that.children('.green').length){
$(that).prepend('<span class="green"></span>');
$('.green').animate({opacity:1},500);
}
else if(that.children('.green').length){
$('.green').animate({opacity:0},500,function(){
$('.green').remove();
});
}
}
intervalID = setInterval(opacityToggle, 500);
},function(){
$('.green').remove();
clearInterval(intervalID);
intervalID = 0;
});
});
ul{
list-style:none;
}
li a {
height:100%;
text-align:center;
position:relative;
width:inherit;
display:block;
}
li {
height: 50px;
width: 250px;
text-align: center;
border: 1px solid black;
}
.green{
position:absolute;
background-color:green;
width:100%;
height:100%;
display:block;
opacity:0;
z-index:-1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-navigation">
<ul>
<li><a>Menu-item#1</a></li>
<li><a>Menu-item#2</a></li>
<li><a>Menu-item#3</a></li>
<li><a>Menu-item#4</a></li>
</ul>
</nav>

Issue on Animating Div Background Color on Click

Can you please take a look at this code and let me know why I am not able to animate the backgournd color of the canvas div on click event?
<div class="colbox" id="yellow"></div>
<div class="colbox" id="green"></div>
<div class="colbox" id="red"></div>
$(".colbox").on("click", function () {
$("#canvas").animate({backgroundColor: $(this).css("background-color")});
});
Thanks

HTML:
<div class="colbox" id="yellow"></div>
<div class="colbox" id="green"></div>
<div class="colbox" id="red"></div>
<div id="canvas"></div>
CSS:
body {
min-height: 200px;
}
#canvas {
width: 200px;
height: 200px;
background: #CCC;
border: 1px solid #CCC;
margin-top: 80px;
}
.colbox {
width: 50px;
height: 50px;
display: inline-block;
float: left;
border: 1px solid #CCC;
margin-right: 5px;
position: fixed;
top: 10px;
}
#yellow {
background-color: yellow;
}
#green {
background-color: green;
left: 70px;
}
#red {
background-color: red;
left: 130px;
}
JS:
$(".colbox").click(function () {
$('#canvas').animate({
backgroundColor: $(this).css('backgroundColor')
}, 500);
});
Here is the working jsfiddle
Try including jQuery UI in the html you are creating.

You can do it with css transition
Instead of .animate() use .css()
$('.colbox').on('click',function(){
$("#canvas").css({'background-color':$(this).css('background-color')});
});
And then set you #canvas to animate the transition when change background-color with:
#canvas{
transition:background-color 1s ease;
-webkit-transition:background-color 1s ease;
-moz-transition:background-color 1s ease;
-o-transition:background-color 1s ease;
-ms-transition:background-color 1s ease;
}
Demo:
http://jsfiddle.net/3DRDL/