.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;
}
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);
}
I am working on a menu that pops up at the right side of the screen.
https://jsfiddle.net/grhajrbp/
Html:
<div id="east-exit">
<div id="mail-option">
<a ng-click="controller.openEmails()"><i class="communicate-icon mail fa fa-envelope"></i></a>
<a><i class="new-mail fa fa-plus-circle"></i></a>
</div>
<a><i class="communicate-icon fa fa-comments"></i></a>
<i class="east-exit-icon fa fa-arrow-right"></i>
<a><i class="communicate-icon fa fa-phone"></i></a>
<a><i class="communicate-icon fa fa-camera"></i></a>
</div>
CSS:
html {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
#east-exit {
display: flex;
opacity: 1;
z-index: -1;
align-items: stretch;
justify-content: space-around;
flex-direction: column;
position: absolute;
right: 0;
height: 100%;
width: 85px;
font-size: 55px;
}
#east-exit:hover .east-exit-icon {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-ms-transition: all .2s ease;
transition: all .2s ease;
opacity: 0;
}
#east-exit:hover .communicate-icon {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
opacity: 1;
}
#east-exit:hover,
#mail-option:hover,
.mail:hover .new-mail {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
opacity: 1;
}
.east-exit-icon {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-ms-transition: all .2s ease;
transition: all .2s ease;
font-size: 45px;
opacity: 0.1;
}
.communicate-icon {
z-index: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
color: darkgrey;
opacity: 0;
}
.new-mail {
z-index: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
color: darkgrey;
opacity: 0;
}
.communicate-icon:hover,
.communicate-icon:focus,
.communicate-icon:active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
color: grey;
cursor: pointer;
}
The menu shows four buttons. If I were to hover over the mail button, a small plus button should present itself next to the mail button. I'm currently only trying to get the plus button to show on hover (it is not at the right place yet. I can't get the plus button to show on hover of the mail button. Does anyone know how to do this?
Moreover, I also tried to get the button at the right place with flexbox. (The images below show where it is supposed to go). I couldn't get this to work either. Does anyone have any suggestions I could try? First image:
Second image:
Third image:
You can use the following css rule
.communicate-icon.fa.fa-envelope:hover {
background: url(<image name>);
background-repeat: no-repeat;
background-position: -40px 0; // Change as needed
}
You will also need to make your div wider or the background image will not be displayed.
I have right side fix position div. I want to display it on hover with animation.
What I want to do that if user hover on the whole div the both span should come out with slide animation. BUT right now the scroll is coming and only one span the text(need help) coming out not ? mark coming out.
.need-help-qu{
background-color:#042E49;
color:#ffffff;
padding:0px 10px;
right:0;
top:40%;
font-weight: bold;
font-size: 20px;
position:absolute;
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{
background-color:#06507D;
color:#ffffff;
right:-150px;
top:40%;
position:absolute;
padding:5px 10px;
display: inline-block;
overflow: hidden;
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 .need-help {
right:0;
}
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>
Check this out.
You were trying to move individual divs so it was proving tricky, just bunch the whole content of .need-help-full div together and move it as a whole.
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>
<style>
.need-help-qu{
background-color:#042E49; color:#ffffff; padding:3px 10px 2px;
font-weight: bold;font-size: 20px;float:left;
}
.need-help{
float:left; background-color:#06507D; color:#ffffff;
padding:5px 10px;overflow: hidden;
}
.need-help-full{
right:-123px; position:fixed; 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;}
</style>
Also I see that you are trying to accomplish this slide in box so mostly it is done using position:fixed; and not using absolute. Since it is generally "fixed" to the page and not to some container element.
You can do following way. Make parent component overflow:hidden. and move need-help-full left/right on hover and give absolute position to need-help-full div.
.need-help-qu {
background-color: #042e49;
color: #ffffff;
display: inline-block;
font-size: 20px;
font-weight: bold;
padding: 3px 10px;
vertical-align: top;
}
.need-help {
background-color: #06507d;
color: #ffffff;
display: inline-block;
overflow: hidden;
padding: 5px 10px;
right: -150px;
}
.need-help-full {
height: 50px;
overflow: hidden;
padding: 5px 10px;
position: absolute;
right: -135px;
top: 40%;
-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;
}
body {
overflow: hidden;
}
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>
Hope it helps.
$(".need-help-qu").hover(function(){
$(".need-help-qu").animate({right: '12px'});
});
body{
overflow-x:hidden;
}
.need-help-qu{
background-color:#042E49;
color:#ffffff;
padding:0px 10px;
right:0;
top:40%;
font-weight: bold;
font-size: 20px;
position:absolute;
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{
background-color:#06507D;
color:#ffffff;
right:-150px;
top:40%;
position:absolute;
padding:5px 10px;
display: inline-block;
overflow: hidden;
transition: all 0.4s ease-in-out;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.need-help-full:hover .need-help {
right:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>
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'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/