I am having difficult making an overlay/hover command in CSS work correctly. I have 4 separate div's side by side, and when I put an overlay on it to make the picture fade on hover, it puts the hover effect on the other div's with the effect as well regardless of whether or not you are hovering over that div. I tried to restrict the hover to an image in the div, but could not The page that is having the trouble is- http://www.peel-lawfirm.com/practice-areas/workplace-injury
Here is my CSS code-
.fade {
opacity: 0.5;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
.overlay {
position: absolute;
top: 0;
bottom: 10;
left: 0;
right: 10;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #ffffff;
}
.container:hover .overlay {
opacity: 0.7;
overflow: hidden;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
And here is my html for that portion of the page-
<div class="container">
<p>
<h3 style="text-align:center;">Practice Areas</h3>
<hr>
</p>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<p><jdoc:include type="modules" name="box1" /></p>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<p><jdoc:include type="modules" name="box2" /></p>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6 col-xs-12">
<p><jdoc:include type="modules" name="box3" /></p>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<p><jdoc:include type="modules" name="box4" /></p>
</div>
</div>
</div>
You have .container:hover .overlay {...} which means when the .container div is hovered it will apply for all .overlay divs inside it. You need to apply the :hover only for the desired .overlay divs inside the .custom divs.
Change .container:hover .overlay {...} to .custom:hover .overlay
Related
If I hover over the image div, the text section will become from the bottom showing div shear in code my code is semple code very this is my code content button
If I hover over the image div, the text section will become from the bottom showing div shear in code my code is semple code very this is my code content button
.photo-album .common .details {
text-align: center;
position: absolute;
bottom: 15%;
left: 0;
right: 0;
transform: translateY(200%);
transition: .3s ease-in;
}
.photo-album .common .photo::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
background: #00000086;
transform: translateY(100%);
transition: .3s ease-in;
z-index: 8;
}
.photo-album .common .photo:hover.photo::after {
transform: translateY(0);
}
.photo-album .common .photo:hover.details {
transform: translateY(0);
}
<section class="photo-album">
<div class="common">
<div class="photo">
<div class="border-bottom border"></div>
<div class="border-left border"></div>
<img src="./images/ayon.jpg" alt="">
</div>
<div class="details">
<h1>Shorif Uddin</h1>
<p>Student of Programming Hero</p>
</div>
<div class="overlay"></div>
</div>
</section>
I have the following html code :
.logo {
display: inline-block;
width: 30px;
position: absolute;
top: 50%;
opacity: 0;
transition: 0.6s;
}
.container:hover .logo {
opacity: 1;
transition: 0.6s;
}
.container:hover .picture {
filter: brightness(0.7);
transition: 0.6s;
}
<div class="container">
<div class="element-header">
<div class="element">Foo</div>
<div class="element">Bar</div>
</div>
<div class="loader"> </div>
<img src="logo.png" alt="" class="logo">
<img src="picture.jpg" alt="" class="picture">
</div>
When .container is hovered, I want .logo to be at opacity:1 and .picture to be at filter: brightness(0.7).
When a try to apply those properties one-by-one at .container hover, each is working. But when both are set-up, only the filter one is working.
If you set the position to relative instead of absolute, both images will display. As the code stood, one image was getting lost. (I substituted my own images in and added a picture class to size the image)
The transition works fine though!
Try below:
.logo {
display: inline-block;
width: 100px;
//height:auto;
position: relative;
top: 50%;
opacity: 0;
transition: 0.6s;
}
.picture {
width: 500px;
height: auto;
float: left;
}
.container:hover .logo {
opacity: 1;
transition: 0.6s;
}
.container:hover .picture {
filter: brightness(0.7);
transition: 0.6s;
}
<div class="container">
<div class="element-header">
<div class="element">Foo</div>
<div class="element">Bar</div>
</div>
<div class="loader"> </div>
<img src="https://www.dcu.ie/sites/default/files/afu_logo2_1.jpg" alt="agefriendly" class="logo">
<img src="http://www.rachelgallen.com/images/mountains.jpg" alt="Mountains" class="picture">
</div>
Fiddle here
I have two divs, one carrying the content, the other one existing for the sole purpose of having a background image set to blur on hover.
Both of them are placed in a single container, appear as they should, though the problem is that when I hover over the content div, logically (given the structure of the code I've written), the blur rule set to the background div is no longer active.
My question is how can I get it to work so that when I hover over the content div, the background stays blurred, or whether it is even achievable through pure HTML/CSS
.col-lg-6 {height: 100%; margin: auto; padding: 0; border: none}
.container {height: 100%; ; background: #333333; }
.content {position: absolute; z-index: 10;}
.bg {height: 100%;; background-image: url(bg.jpg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;}
.bg:hover {-webkit-filter: blur(15px);}
<a href="#">
<div class="col-lg-6 col-sm-12">
<div class="container">
<div class="content">
<img src="icon.png" class="img-responsive">
<h2>Icon</h2>
</div>
<div class="bg">
</div>
</div>
</div>
</a>
You can check for the mouseover event and then set a class to the element, so it will stay with the "blurred" effect.
You can use jQuery for that, as below:
$(document).ready(function () {
$('.bg').on('mouseover', function() {
$(this).addClass('bg-hovered');
});
});
And the class:
.bg-hovered {-webkit-filter: blur(15px);}
See fiddle working: https://jsfiddle.net/guschnwg/bg03hb6k/
You need to change the :hover pseudo-class to your .container class.
Instead of this:
.bg:hover {
-webkit-filter: blur(15px);
}
Do this:
.container:hover .bg {
-webkit-filter: blur(15px);
}
This way, even if you hover the .content element, the blur will still be applied.
.container {
height: 100%;
background: #333333;
position: relative;
}
.content {
position: relative;
z-index: 10;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://fillmurray.com/1000/500) no-repeat center center / cover;
transition: all 0.5s ease;
}
.container:hover .bg {
-webkit-filter: blur(15px);
}
<div class="container">
<div class="content">
<img src="http://placehold.it/50x50" class="img-responsive">
<h2>Icon</h2>
</div>
<div class="bg"></div>
</div>
I have kind of a thumbnail with an image and some text inside. When I hover over the image, it zooms in.
Here is a fiddle:
https://jsfiddle.net/ShiroiOkami/r1awd3b4/
I want to achieve an effect that the image just zooms in, but it's size stays the same. I don't want it to grow. How to do it?
P.S. the code for instance:
<div class="wrapper">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" style="width:150px;" class="grow">
<div class="description">
<h3>
Some title
</h3>
<p>
some text
</p>
</div>
CSS:
.wrapper{
background-color: #fff;
text-align: center;
width: 150px;
overflow: hidden;
}
.grow{
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.grow:hover{
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}
.description{
background-color: #fff;
overflow: hidden;
}
I've fixed your fiddle, so you'll get the required effect: https://jsfiddle.net/r1awd3b4/1/
What I've done is add an extra wrapper div around the image:
<div class="img-wrapper">
<img src="..." class="grow">
</div>
CSS:
.img-wrapper{
width: 100%;
height: 150px;
overflow: hidden;
}
.img-wrapper img{
display: block;
width: 100%;
}
Now the image can grow all it wants but since the wrapper will not, the image will not 'grow', but just 'zoom'.
may be you mean this effect?:
<div class="wrapper">
<div class="img-container">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" style="width:150px;" class="grow">
</div>
<div class="description">
<h3>Some title</h3>
<p>some text</p>
</div>
</div>
and the css:
.img-container {
width: 150px;
height: 150px;
overflow: hidden;
}
I have some off canvas content that I am showing with a basic slide animation. The sidebar just slides in from the right side. When the content slides in, it pushes my current content to the left, and I just want the content to be displayed over the content on the page. Here is my html:
<div class="container-full header-offset">
<div class="row-offcanvas">
<div class="row">
<div id="encounterList" class="col-sm-8 col-md-8 col-lg-8"></div>
<div id="chatContainer" class="col-sm-4 col-md-4 col-lg-4 sidebar-offcanvas"></div>
</div>
</div>
</div>
And here is the important css:
#media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
position: relative;
-webkit-transition: right .3s ease-in;
-most-transition: right .3s ease-in;
transition: right .3s ease-in;
}
.sidebar-offcanvas {
right: -80%;
width: 80%;
position: absolute;
top: 0;
background-color: #F7F7F7;
padding: 0;
height: auto;
}
&.active {
right: 80%;
}
}
What do I need to do?