I'm trying to change the attributes of one div from another div's hovering. Both of the div's has their own unique ID and I'm wondering if this is possible.
Here is the jsfiddle link:
http://jsfiddle.net/Ngx5D/
And here is the sample code:
body {
background-color:lightgrey;
}
#div_one, #div_two{
background-color:darkred;
display:block;
width:300px;
text-align:center;
padding:30px;
margin:10px;
color:white;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
#div_one:hover {
background-color:red;
}
Write like this:
#div_one:hover + #div_two{
background-color:red;
}
Check this http://jsfiddle.net/Ngx5D/1/
Related
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;
}
Opacity is not working when position is absolute
a.Button5{
display:block;
opacity:0.7;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
a.Button5:hover{
opacity:1;
}
<a href="(imageFile)" class="button5" rel="lightbox[imgBox]">
<div class="ch-item cha_01">
<div class="ch-info" style="top:0px; left:30px;">
<h3>(Text)</h3>
</div>
</div>
</a>
.cha_12{
position:relative;
float:left;
width:225px;
height:160px;
top:0px;
left:0px;
background-image:url(images/cha_ra_04.png); }
this works very well.
but
.cha_12{position:absolute;
float:left;
width:136px;
height:378px;
top:316px;
left:814px;
background-image:url(images/cha_ra_12.png);}
this doesn't work in IE10.(Firefox, chrome is working very well)
I don't know what i do wrong. please help me
be more specific
a .ch-item {
opacity:0.7;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
a:hover .ch-item {
opacity: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
}
I am trying to create a horizontal accordion in twitter bootstrap (2.3.2). I have found some css online that works very well and allows me to utilize the existing js. This all works great - except in safari (iOS and Windows). In safari the collapsed element still retains some width even though the width is correctly set to 0px.
I have created a fiddle:
http://jsfiddle.net/foetalstalk/3erSh/
The css I am using is:
.accordion-group, .accordion-heading, .accordion-body
{
display:inline-block;
}
.collapse
{
height:auto;
width:auto
}
.collapse.height
{
height:0;
-webkit-transition:height .35s ease;
-moz-transition:height .35s ease;
-o-transition:height .35s ease;
transition:height .35s ease;
}
.collapse.width
{
width:0;
-webkit-transition:width .35s ease;
-moz-transition:width .35s ease;
-o-transition:width .35s ease;
transition:width .35s ease;
}
.collapse.width.in
{
width:auto
}
.collapse.height.in
{
height:auto
}
I am developing on windows and can replicate the problem using the safari downloaded from here:
http://support.apple.com/kb/dl1531
The problem seems to be with the inline-block elements. Can this be fixed with a little sprinkle of css magic?
Try use max-width:0; and max-width:1000px;. It's work for me
.collapse.width
{
width:0px;
max-width:0;
-webkit-transition:width .35s ease;
-moz-transition:width .35s ease;
-o-transition:width .35s ease;
transition:width .35s ease;
}
.collapse.width.in
{
width:auto;
max-width:1000px;
}
DEMO
Thanks for the help Anon.
As it happens it was easier to create this from scratch as suggested by Anon.
http://jsfiddle.net/foetalstalk/N2GSV/23/
.accord-group, .accord-heading, .accord-body
{
display:inline-block;
}
.accord-body
{
vertical-align:top;
visibility:hidden;
/* non zero width - for safari */
margin-left:-1px;
width:1px;
-webkit-transition:all 0.35s ease;
-moz-transition:all 0.35s ease;
-o-transition:all 0.35s ease;
transition:all 0.35s ease;
overflow:hidden;
}
.accord-body.in
{
visibility:visible;
margin-left:0px;
width:100px;
}
See fiddle for html and js.