Just making this from scratch for a project of mine. I am wanting to create a hover affect on an image that then displays content about that image on top. The image would dim on the hover and the content would then display above it.
The problem that I am having is the content is going off the opacity of its parent div. How do I make the child div not get affected by the opacity property?
Here is my HTML:
<div class="featured-home-bg">
<div class="background-content">
<div class="featured-home-content">
<h2>Home Name</h2>
<p>Lorem Ipsum leo dormit tan loius ov noetermit.</p>
</div><!--- end featured-home-content --->
</div><!--- end background-content --->
</div><!--- end featured-home-bg --->
Here is my CSS:
.featured-home-bg {
background: url(../images/home-1.jpg) no-repeat;
background-size: 400px;
height: 300px;
}
.background-content {
background-color: #000;
height: 225px;
width: 400px;
opacity: 0;
}
.background-content:hover {
opacity: 0.6;
-webkit-transition: opacity 0.50s ease-in-out;
-moz-transition: opacity 0.50s ease-in-out;
-ms-transition: opacity 0.50s ease-in-out;
-o-transition: opacity 0.50s ease-in-out;
}
.featured-home-content {
width: 400px;
height: 300px;
}
.featured-home-content:hover {
cursor: pointer;
width: 400px;
height: 300px;
}
here this is the way to do that as #Henric Åkesson said but here with every div
html
> <div class="image"><!-- image can be placed here --> <div
> class="imagehover">text </div></div>
css
.image {
width: 400px;
height: 400px;
background-color: red;
line-height: 400px;
}
.imagehover{
width: 400px;
height: 400px;
background:;
opacity:0;
text-align: center;
font-size:20px;
transition: 0.2s ease-in-out;
}
.image:hover .imagehover {
transition: 0.2s;
opacity:1;
background-color: rgba(0, 0, 0, 0.5);
text-align:justify;
color:white;
font-size:25px;
font-weight:700;
font-family: "apercu",Helvetica,Arial,sans-serif;
text-align: center;
line-height: 400px;
}
http://jsfiddle.net/d6yhnmnf/5/
I think you would like to have the code something like this?
.featured-home-bg:hover .background-content {
opacity: 0.6;
}
Related
I have a header with two divs. The two divs are next to each other. I'm using bootstrap with flex box for this. I want to create a sliding effect (and zoom) when hovering over the divs. Hovering over the left div should change the width of both the left and right div.
Tricky part I'm having is that I want to add a diagonal line with the same color as the right div to create a nice look. I've tried creating that with a pseudo after on the right div but the issue is when hovering it will not move with the rest of the div. I had to give it position: absolute to display it outside the right div.
Maybe I'm doing something wrong or maybe there is a better solution. I haven't figured this one out yet.
JSfiddle
https://jsfiddle.net/aq9Laaew/235971/
.header {
z-index: 1;
height: 50vh;
position: relative;
overflow: hidden;
}
.header-img {
width: 60vw;
height: 50vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(asset_path("bgs/bg-1.jpg"));
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
}
.header-img:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
width: 80vw;
}
.header-content {
color: #000000;
background-color: #FFFFFF;
width: 40vw;
height: 50vh;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
overflow-x: visible;
}
.header-content:hover {
width: 80vw;
}
.overlay::after {
content: " ";
display: inline-block;
position: absolute;
width: 20%;
height: 100%;
left: 50%;
border-style: dashed;
border-width: 1em;
border-color: #000000;
}
<div class="header d-flex flex-row">
<div class="header-img"></div>
<div class="header-content">
<div class="overlay"></div>
<div class="d-flex justify-content-center">
<div class="mt-5">
<div class="text-center header-text">
<h2>Text</h2>
</div>
</div>
</div>
</div>
</div>
After some investigation I've fixed the sliding effect of the overlay. I've appended the div.overlay inside the header-content and set postion:relative on .header-content class.
.header {
z-index: 1;
height: 50vh;
position: relative;
overflow: hidden;
}
.header-img {
width: 60vw;
height: 50vh;
background-position: 75% 50%;
background-color: #EFEFEF;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
}
.header-img:hover {
transform: scale(1.1);
width: 100vw;
}
.header-content {
position: relative;
color: #000000;
background-color: #FFFFFF;
width: 40vw;
height: 50vh;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
overflow-x: visible;
}
.header-content:hover {
width: 80vw;
}
.content-text {
position: absolute;
left: -2%;
}
.overlay::after {
content: " ";
display: inline-block;
position: absolute;
width: 70%;
height: 200%;
left: -35%;
top: -60%;
background-color: #FFFFFF;
transform: rotate(10deg);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header d-flex flex-row">
<div class="header-img"></div>
<div class="header-content">
<div class="overlay"></div>
<div class="d-flex justify-content-center">
<div class="mt-2">
<div class="text-center content-text">
<h3>text</h3>
</div>
</div>
</div>
</div>
</div>
Here is my code:
#mainwrapper {
font: 10pt normal Arial, sans-serif;
height: auto;
margin: 80px auto 0 auto;
text-align: center;
width: 1000px;
}
/* Image Box Style */
#mainwrapper .box {
border: 2px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 0 auto;
position: relative;
overflow: hidden;
width: 400px;
background-size: cover;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
width: 100%;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#mainwrapper .box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 30px;
width: 200px;
display: block;
bottom: -30px;
line-height: 10pt;
text-align: center;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 1;
transform: translateY(-100%);
}
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="http://www.sideshowtoy.com/wp-content/uploads/2016/01/marvel-deadpool-sixth-scale-hot-toys-feature-902628.jpg" />
<span class="caption simple-caption">
<p>Pool</p>
</span>
</div>
</div>
What I want to do is to set background image inside parent div to stretch.
I have tried in #mainwrapper .box img like
position:absolute;
margin: auto;
max-width: 100%;
max-height: 100%;
But it doesn't work .
Fiddle Example
a few things:
you can't have p tag inside span
use max-width:100% in your img (or width:100% if the image is smaller than the container)
use max-width over width in your #mainwrapper to avoid scrollbars, with that the container will be "resizable", so easier to work for responsive
remove background:cover, because you don't have a background at all
UPDATE
added object-fit per OP request in comment.
#mainwrapper {
font: 10pt normal Arial, sans-serif;
height: auto;
margin: 80px auto 0;
text-align: center;
max-width: 1000px;
}
/* Image Box Style */
#mainwrapper .box {
border: 2px solid #fff;
cursor: pointer;
height: 200px;
margin: 0 auto;
position: relative;
overflow: hidden;
width: 400px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
object-fit: cover;
height: 100%;
width: 100%
}
#mainwrapper .box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 30px;
width: 100%;
display: block;
bottom: -30px;
line-height: 10pt;
text-align: center;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 1;
transform: translateY(-100%);
}
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="http://www.sideshowtoy.com/wp-content/uploads/2016/01/marvel-deadpool-sixth-scale-hot-toys-feature-902628.jpg" />
<span class="caption simple-caption">Pool</span>
</div>
<hr />
<div id="box-2" class="box">
<img id="image-2" src="//lorempixel.com/100/400" />
<span class="caption simple-caption">Pool</span>
</div>
</div>
Just set the image's width to 100%
#mainwrapper .box img {
width: 100%;
}
Fiddle
or add the background-image in css for the div.
.box {
background-image: url("http://www.sideshowtoy.com/wp-content/uploads/2016/01/marvel-deadpool-sixth-scale-hot-toys-feature-902628.jpg");
background-size:cover;
}
remove the <img> tag in your HTML if you choose this route.
I am creating a rollover on an image div where once you roll over, the image opacity goes down and text over the top appears. This works fine for just one image, but when trying it on more then one image the opacity doesn't work correctly and the text doesn't seem to appear on the other images.
HTML:
<div class="worklongdiv" style="padding-top:111px";>
<img src="images/Vividworklong.jpg"/>
<div class="work-text-content-long">
<header>VIVID VAPOURS</header>
<p style="font-size:17px; font-family:GothamRoundedBold;">Branding • Product Dev • Web Dev</p>
</div>
</div>
<div class="worklongdiv" >
<img src="images/Vividworklong.jpg"/>
<div class="work-text-content-long">
<header>VIVID VAPOURS</header>
<p style="font-size:17px; font-family:GothamRoundedBold;">Branding • Product Dev • Web Dev</p>
</div>
</div>
CSS:
.worklongdiv{
width: 100%;
min-height: 120px;
max-height:auto
position: relative;
background-color: black;
}
.worklongdiv:hover img {
opacity: 0.3;
}
.worklongdiv:hover .work-text-content-long {
opacity: 1;
}
.worklongdiv img {
padding: 0;
width: 100%;
display: block;
opacity: 1;
}
.worklongdiv img,
.work-text-content-long {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.work-text-content-long {
height:100px;
position: absolute;
color: white;
left: 0;
top: 25%;
right: 0%;
left:101px;
bottom: 0;
font-size: 24px;
text-align: left;
opacity: 0;
}
You're missing a ; in one of your CSS rules.
.worklongdiv{
width: 100%;
min-height: 120px;
max-height:auto;
position: relative;
background-color: black;
}
I was trying to implement splitting of entire content to create a slideshow. Something similar to this.
http://tympanus.net/Tutorials/FullscreenSlitSlider/
The problem is splitting of divisions equally. I just don't want them to appear to be split but actually split with the first div containing all content but only top 50% height of actual content, and second div containing all content but having only bottom 50% height of original div.
Here's what I have so far.
.container {
position: absolute;
width: 100%;
height: 20%;
}
.slide1, .slide2 {
width: 100px;
height: 50%;
/*height: 100%;*/
overflow: hidden;
position: absolute;
color: #AAA;
}
.slide1 {
background: #F00;
}
.slide2 {
top: 50%;
background: #0F0;
}
Here's a fiddle link.
UPDATE: This is what I want the end result to look like. This is just a quick hack that appears as though second div is split.
If you just viewed source in the demo site you supplied, you might have seen this bit of code:
<script type="text/javascript" src="js/jquery.slitslider.js"></script>
And if you googled jquery slitslider, the first link you get is FULLSCREEN SLIT SLIDER WITH JQUERY AND CSS3
Do you looking for this..
.container {
position: absolute;
width: 100%;
height: 100%;
}
.slide1, .slide2 {
width: 100px;
height: 100px;
overflow: hidden;
color: #AAA;
}
.slide1 {
background: #F00;
}
.slide2 {
top: 50%;
background: #0F0;
}
Fiddle: http://jsfiddle.net/6Kz7c/3/
EDIT:
Fiddle: http://jsfiddle.net/6Kz7c/5/
This uses a jquery plugin call FULLSCREEN SLIT SLIDER
So You no need to implement it from the sketch.
Here you can find a tutorial how to use that and download the library.
http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/
Edit:
css
* {
margin: 0;
padding: 0;
}
body {
background: #222;
}
.reveal {
width: 300px;
height: 300px;
margin: 50px;
float: left;
}
.curve {
background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 150px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -225px, #f6d9ad;
background-repeat: no-repeat;
-webkit-transition: background-position 0.3s ease;
-moz-transition: background-position 0.3s ease;
-o-transition: background-position 0.3s ease;
-ms-transition: background-position 0.3s ease;
transition: background-position 0.3s ease;
}
.curve:hover {
background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 210px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -285px, #f6d9ad;
background-repeat: no-repeat;
}
.reveal p {
font: 45px/300px Helvetica, Arial, sans-serif;
text-align: center;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.reveal:hover p {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
cursor: pointer;
}
html
<div class="reveal curve">
<p>lorem</p>
</div>
Fiddle is here
The same principle as that of vertical splitting can be used for horizontal as well. The HTML layout had to be modified a bit to get it working.
HTML
<div class="container">
<div class="slide-wrapper">
<div class="slide1">
<div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
</div>
<div class="slide2">
<div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
</div>
</div>
</div>
Here's a working fiddle.
http://jsfiddle.net/6Kz7c/8/
i am trying to animate a div when hovering on another div. Ihave following code
html
<div>
</div>
<div class="content">
</div>
css
div {
height: 100px;
width: 100px;
background: red;
transition: all 0.4s ease-in-out;
}
.content {
height: 20px;
width: 20px;
background: green;
display: none;
}
div:hover + .content{
display: block;
margin-top: -100px;
margin-left: 50px;
}
What i am trying to do is, i need to animate .content to margin-top: -100px and margin-left: 50px; from its default position, when the user is hover on one of these elements. But atm with this code it only works when the user hover on the .content and it animate the other way. (from margin-top: -100px and margin-left: 50px; to default position). Please excuse my english
jsfiddle-> http://jsfiddle.net/fTAUk/1/
You need to wrap the content in the div and use a child selector. Note I gave the larger div an id as well. Here is the css:
JS Fiddle
#box {
height: 100px;
width: 100px;
background: red;
position: absolute;
transition: all 0.4s ease-in-out;
}
#content {
width: 20px;
background: green;
height: 0;
transition: all 0.4s ease-in-out;
position: margin-top: -100px;
margin-left: 50px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
#box:hover > #content {
height: 20px;
}