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?
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 am trying to make my images act like this: http://www.kas.tw/ (hover over images beneath the image carousel) but my images expand from the side and I can't figure out how to make the image still stay in its box, here is the code.
CSS
#image3{
top: 130%;
left: 20%;
display: none;
}
#cover1{
width: 5%;
height: 100%;
left: 47%;
background-color: green;
z-index: 2;
top: 94%;
position: absolute;
}
.zoom {
padding: 50px;
transition: transform .2s; /* Animation */
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large,
it will go outside of the viewport) */
}
HTML
<DIV class='zoom' id='image1'><IMG width='50%' height='90%' src="slime3.JPG"></DIV>
<DIV id='image2'><IMG width='50%' height='90%' src="slime4.JPG"></DIV>
<DIV id='image3'><IMG width='50%' height='90%' src="slime5.JPG"></DIV>
<DIV id='image4'><IMG width='50%' height='90%' src="slime6.JPG"></DIV>
<DIV id='image5'><IMG width='50%' height='90%' src="slime7.JPG"></DIV>
<DIV id='image6'><IMG width='50%' height='90%' src="slime8.JPG"></DIV>
<DIV id='cover1'><DIV>
<DIV id='cover2'><DIV>
<DIV id='cover3'><DIV>
<DIV id='cover4'><DIV>
<DIV id='cover5'><DIV>
You can make images stay in the box without expanding its container size.
This can be done purely on CSS by using max-width,max-height to set a specific box size and to use overflow: hidden to hide the excess image when it expands past the width and height.
transform: scale(2,2) allows the image to zoom from the center.
Try this:
#holder {
max-width: 200px;
max-height: 200px;
overflow: hidden;
}
#holder img {
width: 100%;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#holder img:hover {
transform: scale(2,2);
}
<div id="holder">
<img src="https://picsum.photos/200/200">
</div>
You could try this
<div class="item">
<img>..</img>
</div>
and for css
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
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
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 am unable to align image to the width of caption with maintaining the gutter width. I am using bootstrap and also the image is flowing outside the div on hover. Can anybody help me out ?
This is what i am trying to achive : https://awwapp.com/s/43b68655-83a6-4133-ab28-0ec9a4152316/
Pen : http://codepen.io/anon/pen/XbxOMq
HTML :
HOTSPOT TEXTf
<div class="col-md-4 hotspot-wrapper">
<img src="https://newevolutiondesigns.com/images/freebies/hd-widescreen-wallpaper-3.jpg" alt="..." class="img-responsive">
<div class="hotspot-text">
HOTSPOT TEXTf
</div>
</div>
</div>
<div class="col-md-4 hotspot-wrapper">
<img src="https://newevolutiondesigns.com/images/freebies/hd-widescreen-wallpaper-3.jpg" alt="..." class="img-responsive">
<div class="hotspot-text">
HOTSPOT TEXTf
</div>
</div>
</div>
CSS:
.hotspot-wrapper {
position: relative;
overflow: hidden;
margin-bottom:20px;
}
.hotspot-text {
width:100%;
height: 102px;
position: absolute;
bottom: -50px;
transition: all .2s linear;
background: rgba(0,0,0,.7);
color:#fff;
}
.hotspot-wrapper:hover .hotspot-text {
bottom: 0;
}
.hotspot-wrapper img {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.hotspot-wrapper:hover img {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
You should make your CSS for these two classes like this, so the hotspot for the text will be aligned with the image :
.hotspot-text {
height: 102px;
position: absolute;
bottom: -50px;
right:0px;
left:0px;
transition: all .2s linear;
background: rgba(0,0,0,.7);
color:#fff;
}
.hotspot-wrapper:hover .hotspot-text {
bottom: 0;
left:0;
right:0;
}
And you should overwrite the padding on the left and on the right set there by default with bootstrap. Like that, the image will have the full width of the div.
.col-lg-4 ,.col-md-4,col-sm-4,col-xs-4{
padding-left:0px;
padding-right:0px;
}
Here's a Fiddle