We Keep Coding

On hover another layer move if that layer mose hover then hover stop

Hover is kind of funny as in this code a new layer .hide which get appear when hover as it transition it response differently I try diffent thing like hide:hover +img{} and other if anybody know about it please help is there is any hack in this issue.
Thing is there is two layer first layer should fade Opacity and another layer transition with animation that is only word. Which is .hide Class that but if then i hover on .hide class which transition when hover cause issue.,
Right Now i using with z index different But then Text hide behind the back of image.
.catalog {
overflow:hidden;
width:300px;
height:300px;
margin:2px;
}
.catalog img:hover{
transition: transform 500ms , opacity 500ms 0ms ease-in-out;
transform: scale(1.3);
opacity: 0.3;
}
.hide{
z-index:0;
display:block;
font-size: 10px;
position:relative;
top:-50px;
transition: font-size 500ms , top 500ms 0ms ease-in-out;
width:100%;
background: #6c6c934d;
background-size: 300px 300px;
color: #13436c;
}
.catalog img:hover + .hide {
font-size:50px;
top:-300px;
padding-bottom:50px;
}
<div class="flex wrap center space-around jcenter">
<div class="catalog">
<img src="https://ikrent.com/include/image/refrigerator.png" height="300px">
<label class="hide"> Refrigerator</label>
</div>
</div>

This issue happens because you add the styles on img:hover, simply, by default, these events are triggered for the selector itself or one of its children, in this case, the image and the div.hide are siblings, to avoid this behavior you can update your code to add these styles on catalog:hover, which is a parent of both, so whenever you hover on of them, you will be hovering the parent too
.catalog {
overflow:hidden;
width:300px;
height:300px;
margin:2px;
}
.catalog:hover img{
transition: transform 500ms , opacity 500ms 0ms ease-in-out;
transform: scale(1.3);
opacity: 0.3;
}
.hide{
z-index:0;
display:block;
font-size: 10px;
position:relative;
top:-50px;
transition: font-size 500ms , top 500ms 0ms ease-in-out;
width:100%;
background: #6c6c934d;
background-size: 300px 300px;
color: #13436c;
}
.catalog:hover .hide {
font-size:50px;
top:-300px;
padding-bottom:50px;
}
<div class="flex wrap center space-around jcenter">
<div class="catalog">
<img src="https://ikrent.com/include/image/refrigerator.png" height="300px">
<label class="hide"> Refrigerator</label>
</div>
</div>

grow element size using javascript

I'm working on a project where I hover over an image and a hidden element with info about my image appears . I perform this functionality using javascript . However I would like the image size to gracefully grow from very small to the normal size when I hover over my image .
I have a small code demo with a text instead of an image below :
function showinfo(){
document.getElementById("hidden").style.visibility="visible";
}
function noinfo(){
document.getElementById("hidden").style.visibility="hidden";
}
#hidden{
width:100px;
height:100px;
background-color:green;
visibility:hidden;
}
<p id="hover" onmouseover="showinfo()" onmouseout="noinfo()">
Hover over me !</p>
<div id ="hidden">
I am the hidden text !
</div>
I would appreciate your help with guiding me through this small task . Thank you in advance .

function showinfo() {
document.getElementById("hidden").style.visibility = "visible";
}
function noinfo() {
document.getElementById("hidden").style.visibility = "hidden";
}
#hidden {
width: 0;
height: 100px;
background-color: green;
visibility: hidden;
padding: 10px;
transition: width 2s;
color:#fff;
font-size:20px;
}
#hover:hover~#hidden {
width: 100%
}
<p id="hover" onmouseover="showinfo()" onmouseout="noinfo()">
Hover over me !
</p>
<div id ="hidden">
I am the hidden text !
</div>

You can achieve this one by css.
#hidden_text {
transform: scale(0);
transform-origin: 50 50;
transition: transform 2s 0s;
width:100px;
height:100px;
background-color:green;
}
#hover:hover ~ #hidden_text {
transform: scale(1);
}
<p id="hover">Hover over me !</p>
<div id="hidden_text">
I am the hidden text !
</div>

no need foor JS for such simple task. You can simply do it with the :hover tag with CSS and add a transition tag to get your wanted animation of growing slowly.
.image {
width: 200px;
height: 100px;
background-color: blue;
}
.image:hover {
width: 500px;
height: 250px;
background-color: blue;
transition: width 2s, height 2s;
}
<div class="image">I'm an Image</div>

Fade borders of image without box-shadow

I want to fade the borders of an image to smoothly blend to the background image.
Like this:
All suggestions in internet are about using box-shadow inset and to set the same solid color to the parent element, but it wouldn't work for my case. Trick with box-shadow with 0.5 alpha or so it's also unuseful.
What could I do? Prefer CSS but maybe canvas and javascript could be necessary.

I would consider duplicating the image using pseudo element where I apply blur filter:
.box {
width:400px;
height:200px;
background:var(--i);
position:relative;
overflow:hidden;
}
.box:before {
content:"";
position:absolute;
top:0;
right:0;
width:30%;
bottom:0;
background-image:var(--i);
background-position:right;
filter:blur(20px);
}
.box:after {
content:"";
position:absolute;
top:0;
left:0;
width:30%;
bottom:0;
background-image:var(--i);
filter:blur(20px);
}
<div class="box" style="--i:url(http://lorempixel.com/400/200/)">
</div>

How do I resize a div relative to browser window size?

I'm trying to make a slideshow that resizes proportionally relative to the browser window size, but nothing I try seems to work. The following HTML and CSS is what I use so the slideshow stays centered on my page when the browser window is resized, but it does not yet allow for the slideshow to be resized.
How would I go about doing this? My original thought was simply to give the #parent div a max-width or width of some percentage, but it doesn't work. I thought everything inside, as their widths are all set to 100%, should resize with the #parent div, but they don't. I'm not even sure that the #parent div is even resizing at all...
The img is simple y a placeholder for six images I have in my actual code, but that doesn't make any difference.
#parent {
height:100%;
}
.fadein {
position:relative;
top:70px;
width:100%;
height:100%;
}
.fadein img {
position:absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -0%);
-moz-transform: translate(-50%, -0%);
}
#slideshow {
max-width:100%;
width:100%;
height:100%;
}
<div id="parent">
<div id="slideshow">
<div class="fadein">
<img src="http://placehold.it/350x150" />
</div>
</div>
</div>

.fadein img does not have width set to 100%. Also because it is absolutely positioned, the width will be referring to the width of the window. This shouldn't matter though because your parent divs are set to 100%, so either way will look the same.
Edit: also in the future when you have a layout issue, it is really helpful to put a border around your divs. As mentioned in the comments

For height: 100%; to be the height of the viewport, you heed to have height: 100% on all elements going up including <html> and <body>... Most likely, you're better off using a fixed overlay, and the measurement 100vh. You can find good info on the vh unit and what height: 100% really means here: Percentage Height HTML 5/CSS

Your img tag is what needs the resizing. It will act independently from the parent container.
#parent {
height:100%;
}
.fadein {
position:relative;
top:70px;
width:100%;
height:100%;
}
.fadein img {
position:absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -0%);
-moz-transform: translate(-50%, -0%);
}
#slideshow {
max-width:100%;
width:100%;
height:100%;
}
#slideshow img {
width: 100%;
}
<div id="parent">
<div id="slideshow">
<div class="fadein">
<img src="http://placehold.it/350x150" />
</div>
</div>
</div>

#parent {
height:200px;
width:300px;
position:relative;
}
#slideshow {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.fadein {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
}
.fadein img {
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%, -0%);
-moz-transform:translate(-50%, -0%);
width:100%;
height:100%;
}

url doesn't working on css hover overlayrs?

Hi guys i have this code : LINK here
image in this have a link should open it when click .
but when you hover the image the url doesn't working ! (why ?)
sorry for my bad english!
<div class="entry">
<a href="http://google.com">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS12iyyT_pG8r8V2IkiIsL7RHw-BLWjCvqQVgMzXLnLjt3KoCbf" alt="<?php the_title(); ?>" class="postimage" />
</a>
</div>
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.entry:hover:after {
opacity:1;
}

You can do this by adding pointer-events: none to the overlay (or .entry:after in your case). No javascript needed for that. Example:
div.entry:hover {
content:'Click on image for more information';
/* ... other css rules */
pointer-events: none;
}
Now your click will not be 'captured' but it 'bubbles up' to the underlying div.
But, as usual, IE is a troublemaker... This only works for IE11. For other IE versions you'd need javascript anyway...

Your overlay is appearing ABOVE the link, so no click is detected (you're clicking the overlay, not the link). You can change the overlay to be a part of the link instead. See: http://jsfiddle.net/U3QYY/3/
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
a:before {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
a:hover:before {
opacity:1;
}

Most probably this part in your CSS is creating the problem.
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Notice when you hover the mouse over the image the div.entry:after properties are hiding the linked image behind hence disallowing you to open it.
So now I think you had got the problem and you can solve it yourself in your way.