I'm currently using a couple divs to style my background as well as style an overlay for hovering. The problem is that I'd like to create an additional div so that I can style a box on hover as well, but I'm not sure where to place the new div in the HTML without it screwing up my formatting (class .captionbox for example).
My code and JS Fiddle is below. Any help is appreciated.
JS Fiddle
body {
background: url('http://www.bootply.com/assets/example/bg_blueplane.jpg');
height:100%;
margin:0;
padding:0;
}
.bg {
position:fixed;
width:50%;
height:50%
}
#nw {
background-image: url('clevelandnight.jpg');
background-size:cover;
}
#ne {
top:0;
left:50%;
background-image: url('news1.jpg');
background-size:cover;
}
#sw {
top:50%;
left:0;
background-image: url('drinks1.jpg');
background-size:cover;
}
#se {
top:50%;
left:50%;
background-image: url('clevelandday.jpg');
background-size:cover;
}
.overlay {
height:100%;
text-align:center;
-webkit-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
-moz-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
-o-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
-ms-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
}
.bg:hover .overlay {
background:rgba(0, 0, 0, .75);
opacity: 1;
height:100%;
}
.caption {
font-family: 'Open Sans Condensed', sans-serif;
font-weight:100;
color:white;
font-size:36pt;
white-space:nowrap;
-webkit-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
-moz-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
-o-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
}
.bg:hover .caption {
color:#7D7D7D;
font-size:72px;
white-space:nowrap;
margin-right:70%;
}
.captionbox {
height:100px;
width:100px;
background-color:white;
opacity:0;
border: 5px solid red;
}
<div id='nw' class='bg'>
<div class='overlay'>
<span class='caption'>Night Life</span>
</div>
</div>
<div id='ne' class='bg'>
<div class='overlay'>
<span class='caption'>News</span>
</div>
</div>
<div id='sw' class='bg'>
<div class='overlay'>
<span class='caption'>Food & Drink</span>
</div>
</div>
<div id='se' class='bg'>
<div class='overlay'>
<span class='caption'>Events</span>
</div>
</div>
If you make the div display:none it won't take up any space on the page. I presume as a caption box it's going to be position: absolute, so once that style is applied it won't affect your layout anyway. So you should be able to put it at the top level as a child of <body>.
Related
I'm making a div over another div, so when you hover the top div, you will see the one under it.
the background colors are the same, but when I check it, it makes this weird color before the animation is complete:
I tried all kind of stuff I found online and here but nothing helped.
does anyone know how to fix it?
thanks in advance.
#morningEtgarWrap{
position:relative;
width:25%;
height:260px;
}
#morningEtgar, #morningEtgarDes{
z-index:90;
text-align:center;
}
#morningEtgarExp, #morningEtgar{
background-color:#7126C6;
position:absolute;
width:100%;
height:100%;
text-align:center;
}
#morningEtgarDes, #morningEtgarName{
height:70px;
background-color:#FCED1D;
width:100%;
position:absolute;
bottom:0;
}
#morningEtgarImg{
padding:20px;
max-width:60%;
}
.headDesMorningEtgar{
font-size:14pt;
letter-spacing:2px;
}
#morningEtgarDes{
padding:10px;
}
#morningEtgarWrap:hover #morningEtgar{
opacity: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transform: translate3D(0, 0, 0);
}
#morningEtgarWrap:hover #morningEtgarDes{
opacity: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transform: translate3D(0, 0, 0);
}
<div id="morningEtgarWrap">
<div id="morningEtgar">
<img id="morningEtgarImg" src="http://localhost/et-garim/wp-content/uploads/2019/12/Asset-2-1.png"/>
</div>
<div id="morningEtgarDes">
<div><span class="headDesMorningEtgar"><b>עתגר בוקר</b></span>
<br/>
לחת צורק מונחף, בגורמי מגמש לפתיעם.<br/> <b>עוד ></b>
</div>
</div>
<div id="morningEtgarExp">
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור.
</div>
<div id="morningEtgarName">
<div><span class="headDesMorningEtgar"><b>עתגר בוקר</b></span>
</div>
</div>
I need to do One image change on hover to another .
i use this code:
<div id="cf">
<img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" />
<img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" />
</div>
#cf {
position:relative;
height:200px;
width:118px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
I have problem that, i can see hover image (bottom), because top image is transparent. i need that hover image (bottom) only was seen when i hover it
Source of code: http://css3.bradshawenterprises.com/cfimg/
Use hover selector on the parent (#cf:hover) and not on the image.
#cf {
position:relative;
height:200px;
width:118px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top{
width: 200px;
}
#cf img.bottom{
opacity: 0;
}
#cf:hover img.top {
opacity:0;
}
#cf:hover img.bottom {
opacity:1;
}
<div id="cf">
<img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" />
<img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" />
</div>
You could move the :hover state to #cf like so:
#cf {
position:relative;
height:200px;
width:118px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.bottom {
opacity: 0;
}
#cf:hover img.top {
opacity:0;
}
#cf:hover img.bottom{
opacity: 1;
}
<div id="cf">
<img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" />
<img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" />
</div>
CSS Transition is not working in chrome on image hover, please check the JSFiddle example
HTML
<div class="screenThum">
</div>
CSS
.screenThum .portfolio{
width:350px;
display:block;
height:100%;
background-size:100%;
background-repeat:no-repeat;
height:250px;
position:relative;
opacity:0.4;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
.screenThum .portfolio:hover{
opacity:0.9;
background-size:120%;
}
I have tried with previous SO answers but didn't worked with my code, not sure whats wrong?
thanks
If you are comfortable with it then you can use transform:scale
to get same effect. Edited: taking the reference of #Alexandre Beaudet
.screenThum{
overflow: hidden;
width: 350px;
height: 250px;
}
.screenThum .portfolio{
width:350px;
display:block;
height:100%;
background-size:100%;
background-repeat:no-repeat;
height:250px;
position:relative;
opacity:0.4;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;}
.screenThum .portfolio:hover{
opacity:0.9;
-moz-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
<div class="screenThum"></div>
Try to set screenThump width & overflow: hidden. Then use the transform: scale(x) property. This way you will get the zoom effect and the image will not get out of the container width.
.screenThum {
overflow:hidden;
width: 350px;
}
.screenThum .portfolio{
width:350px;
display:block;
height:100%;
background-size:100%;
background-repeat:no-repeat;
height:250px;
position:relative;
opacity:0.4;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
.screenThum .portfolio:hover{
opacity:0.9;
transform: scale(3);
}
.container{
height: 700px;
width:100%;
}
.need-help-qu {
background-color:#042E49;
color:#ffffff;
padding:0px 10px;
font-size: 20px;
transition: all 0.4s ease-in-out;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
float:left;
height:28px;
}
.need-help {
float:left;
background-color:#06507D;
color:#ffffff;
padding:5px 10px;
overflow: hidden;
}
.need-help-full {
right:-95px;
position:fixed;
top:40%;
transition: all 0.4s ease-in-out;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
.need-help-full:hover {
right:0;
}
<div class"container">
Test sscroll
</div>
<div class="need-help-full">
<a href="#">
<span class="need-help-qu p-n-b">?</span>
<span class="need-help text-sm p-n-r">NEED A HELP</span>
</a>
</div>
I have one div with the text and '?' sign at right side center with fix position. When user hover on '?' sign the div comes out from right to left with transition (like social icon). It is working perfectly.
But when scrollbar comes in small screen the whole div come over the scrollbar instead of near the scrollbar.
Can anyone help me?
Thanks in advance.
Just add
.need-help-full {
z-index:-1;
}
I have 2 images that are changing when I hover on the first one.
On the second one, I have some text because I want a link there.
My problem is now that I want the hover image to remain when I hover over the link.
Here is my code:
#blur {
border: 1px solid #bebfc1;
position:relative;
height:450px;
width:300px;
margin:0 auto;
-webkit-transition: border 1s ease-in-out;
-moz-transition: border 1s ease-in-out;
-o-transition: border 1s ease-in-out;
transition: border 1s ease-in-out;
}
#blur img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#blur:hover {
z-index:2;
border: 1px solid #000000;
}
#blur img.top:hover {
opacity:0;
}
#blur .text {
position:absolute;
color:#bebfc1;
opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
font-family:"Segoe UI Light";
font-size:13px;
}
#blur:hover .text {
opacity:1;
}
<div id="blur">
<img class="bottom" src="http://s28.postimg.org/do5izc4gd/image.png" />
<img class="top" src="http://s28.postimg.org/a5tj2y3kd/image.png" />
<p class="text" style="bottom:6px; left:180px;">link</p>
</div>
When I hover over the link I want the red image to remain the same.
How can this be done?
Thanks !!!
DEMO here http://jsfiddle.net/VYR9q/
Okay, I fixed it in the fiddle line you provided :)
Here you are what I fixed:
#blur:hover .top {
opacity:0;
}
Instead of:
#blur img.top:hover {
opacity:0;
}
Edit from: #biziclop:
You can make it:
#blur:hover img.top
I think you should simply move :hover from the img to the common parent #blur
#blur img.top:hover {
to
#blur:hover img.top {
Live example: http://jsfiddle.net/VYR9q/2/
Change your css to :
#blur:hover img.top {
//your css
}