I have a few div boxes on my page, and I'd like to make them display text when you hover over them. I was looking at a few tutorials but I can't seem to get it to work with mine, here is an example of one of my boxes.
html:
<div class="squar-1">
<div class="text-1">
<p>Hello</p>
</div>
</div>
CSS:
.squar-1 {
width: 50%;
height: 350px;
background-color: #e57373;
float: left;
}
.squar-1 .text-1 {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
.squar-1:hover .text {
visibility:visible;
}
That's working, you wrote .text instead of .text-1
.squar-1 {
width: 50%;
height: 350px;
background-color: #e57373;
float: left;
}
.squar-1 .text-1 {
position:relative;
left:0px;
visibility:hidden;
}
.squar-1:hover .text-1 {
visibility:visible;
}
<div class="squar-1">
<div class="text-1">
<p>Hello</p>
</div>
</div>
Edit: to transition text, you should used opacity instead of visibility like:
.squar-1 {
width: 50%;
height: 350px;
background-color: #e57373;
float: left;
}
.squar-1 .text-1 {
position:relative;
left:0px;
opacity: 0;
-webkit-transition: opacity 2s; /* For Safari 3.1 to 6.0 */
transition: opacity 2s;
}
.squar-1:hover .text-1 {
opacity: 1;
}
<div class="squar-1">
<div class="text-1">
<p>Hello</p>
</div>
</div>
Related
This question already has an answer here:
left-right movement.. css only very generic
(1 answer)
Closed 4 years ago.
I have the following HTML:
.container {
width: auto;
height: 32px;
background-color: gray;
display: inline-block;
padding: 4px 8px;
min-width: 400px;
position: absolute;
}
.box {
padding: 0 6px;
height: 100%;
left: 0;
background-color: red;
width: auto;
display: inline-block;
line-height: 32px;
}
<div class="container">
<div class="box">HELLO</div>
</div>
I want to animate the div from right to left in only CSS. The issue is that the inner box has a variant width (due to translations).
If I could do an animation similar to
from {
right: 0;
}
to {
left: 0;
}
it would be exactly what I need, but unfortunately this doesn't work.
How can I animate the inner div with a variant width from left to right using only CSS. The outer div also has a variant width.
Edit:
I would like the inner div to never move outside the outer div.
This is not a duplicate because the inner AND outer container have a variant/unknown width.
You can do this by starting with right:100% and finish to right:0%
EDIT
I've achieve this by using 2 different methods :
by changing the right property and with using a calc() to prevent to box to go outside your container
Use a wrapper who have the width of your container minus the width of your box and use translateX property for your animation.
.container{
background-color:#ccc;
width:400px;
position:relative;
height:50px;
}
.big{
width:600px;
}
.test1 .box{
position:absolute;
width:100px;
height:100%;
right:calc(100% - 100px);
background-color:red;
animation:to-right-1 1s linear forwards;
}
.test2 .wrapper{
position:relative;
width:calc(100% - 100px);
height:100%;
animation:to-right-2 1s linear forwards;
}
.test2 .box{
width:100px;
height:100%;
background-color:red;
}
#keyframes to-right-1{
from{
right:calc(100% - 100px);;
}
to{
right:0px;
}
}
#keyframes to-right-2{
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}
<div class="test1">
<div class="container">
<div class="box">Hello</div>
</div>
<div class="container big">
<div class="box">Hello</div>
</div>
</div>
<div class="test2">
<div class="container">
<div class="wrapper"><div class="box">Hello</div></div>
</div>
<div class="container big">
<div class="wrapper"><div class="box">Hello</div></div>
</div>
</div>
After you define left and right in class.
transition-property: right, left;
transition-duration: 2s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s;
right can be done like
right:calc(100% - 400px)
and use this to make it bigger as you go.
#-webkit-keyframes big {
from { -webkit-transform: scale(.1,.1); }
to { -webkit-transform: scale(1,1); }
}
#keyframes big {
from { transform: scale(.1,.1); }
to { transform: scale(1,1); }
Use this fiddle as reference http://jsfiddle.net/MiKr13/aL7t2jvr/
}
You can use keyframes animation to animate'em.
.container {
width: auto;
height: 32px;
background-color: gray;
display: inline-block;
padding: 4px 8px;
min-width: 400px;
position: absolute;
}
.box {
padding: 0 6px;
height: 100%;
left: 0;
background-color: red;
width: 50px;
display: inline-block;
line-height: 32px;
}
.navr{position:absolute; z-index:55; text-align:center; margin:0 auto; bottom:0%; cursor:pointer;}
.navr {
-webkit-animation-name: bump;
-webkit-animation-duration: 0.3s;
-webkit-animation-iteration-count: 1;
animation-name: bump;
animation-duration: 2s;
animation-iteration-count: 1;
position:absolute;
left:0;
}
#keyframes bump {
0% {right:-100%;}
100% {right:85%;}
}
<div class="container">
<div class="box navr">HELLO</div>
</div>
If you use variant width you can use the element's width to position them.
Here the class .animated has a width of 50px; so we can move it's postion from left:100% to left:50px instead of giving left:0
because the element .animate has the absolute position. That's why we are giving it's width as position here.
.container {
position: relative;
width: 80%;
height: 50px;
border: 1px solid black;
}
.animated {
position: absolute;
width: 50px;
height: 100%;
background-color: red;
animation: .5s linear 0s slide 1;
}
#keyframes slide {
from { left: 100%; }
to {
left: 50px;
transform: translateX(-100%);
}
}
<div class=container>
<div class=animated>hello
</div></div>
Please refer to this jsfiddle: https://jsfiddle.net/b53te5qb/1/
I am attempting to make each of these div widths transition nicely over the other.
Right now it is an instant effect, but I would like for it to transition smoothly. When I attempt the transition it starts to get buggy.
Here is the HTML:
<div class="outer">
<div class="color left"></div>
<div class="color right"></div>
</div>
And here is the CSS so far:
.outer {
position: relative;
height: 100px;
width: 200px;
}
.color {
height: 50px;
width: 50%;
float: left;
transition: width 0.3s linear;
-webkit-transition: width 0.3s linear;
}
.color:hover {
width: 100%;
position: absolute;
}
.left {
background-color: #ff0;
}
.right {
background-color: #0ff;
}
I am open to restructuring this however I would need to in order to complete the task. I just provided this as a base example.
If you're just doing this with solid colors, I would transition transform: scaleX(). Using transition with transform will give you better performance.
.outer {
position: relative;
height: 100px;
width: 200px;
}
.color {
height: 50px;
width: 50%;
float: left;
transition: transform 0.3s linear;
-webkit-transition: transform 0.3s linear;
transform-origin: 0 0;
}
.color:hover {
transform: scaleX(2);
}
.left {
background-color: #ff0;
}
.right {
background-color: #0ff;
transform-origin: 100% 0;
}
<div class="outer">
<div class="color left"></div>
<div class="color right"></div>
</div>
Here you go: https://jsfiddle.net/prowseed/b53te5qb/10/
Two techniques, one with flexbox and one with position absolute, pick any :)
.outer {
position: relative;
height: 100px;
width: 666px;
display:flex;
}
.color {
flex: 1;
height: 100%;
transition: .3s;
}
.color:hover {
flex-basis:100%;
}
.outer2 {
margin-top:100px;
position: relative;
height: 100px;
width: 666px;
}
.outer2:hover .color {
width:0;
}
.outer2 .color {
position:absolute;
top:0;
left:0;
bottom:0;
width:50%;
}
.outer2 .color + .color {
left:auto;
right:0;
}
.outer2 .color:hover {
width:100%;
z-index:2;
}
You'll need to position them absolutely in order to avoid them from moving.
https://jsfiddle.net/b53te5qb/6/
I would highly recommend not transitioning the width, much better would be to transition transform: translateX(), since it will be hardware accelerated and much smoother: https://jsfiddle.net/b53te5qb/8/.
It still needs polishing, but the idea is there. (note the overflow: hidden to avoid showing the excess.) Another improvement would be to have two elements on top (50%/50% width) that trigger the hover via javascript, since when the elements move it's difficult to keep the hover on them, or to remove the hover without leaving the .outer component.
Hope it helps.
I am trying to create a button.
When the the mouse hovers the wrapper div (ks-wrapper), another div (ks-overlay) (that at the start is hidden) will be appeared and the based div (ks-button) hides.
Its also necessary the button not have fixed dimensions.
Any suggestions?
HTML
<div class="ks-wrapper">
<div class="ks-button">
<div class="ks-header">
Header
</div>
<div class="ks-content">
Text
</div>
</div>
<div class="ks-overlay">
"K"
</div>
</div>
CSS
.ks-wrapper {
position: relative;
float: left;
height: 85px;
width: 100%;
}
.ks-button {
position: absolute;
color: white;
width: 100%;
height: 100%;
}
.ks-header{
border-top-left-radius:10px;
border-top-right-radius:10px;
background-color:yellow;
max-height:20px;
font-size:20px;
font-weight:bold;
text-align:center;
color:black;
padding:5px;
}
.ks-content{
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
background-color:grey;
font-size:20px;
font-weight:bold;
text-align:center;
color:black;
padding:5px;
height:100%;
}
.ks-wrapper .ks-overlay {
transition: visibility 0s, opacity 0.5s ease-in-out;
position: absolute;
color: yellow;
background-color: green;
width: 97.5%;
height: 85px;
visibility: hidden;
opacity: 0;
border-radius:10px;
padding:10px;
overflow:hidden;
}
.ks-wrapper:hover .ks-overlay {
visibility: visible;
opacity: 1;
}
UPDATE
For start I want to thank you all for your fast responses to my issue.
Secondly, I would like to make myself more clear... and also to add a couple of problems that I figure them out...
1)This button its gonna used in a responsive template.
Is it possible the button not to have a fixed height, and the overlay to follow this height?
2)how can accomplish to have transition and to mouse leave (transition works only in hover)??
3)This button stays on top of the following elements
This is the link in the fiddle that represents the issues.
Thank you a lot for your time
the header is taking 20 px on the top.. you need tho add these to your .ks-wrapper .ks-overlay {
.ks-wrapper {
position: relative;
float: left;
height: 85px;
width: 100%;
}
.ks-button {
position: absolute;
color: white;
width: 100%;
height: 100%;
}
.ks-header{
border-top-left-radius:10px;
border-top-right-radius:10px;
background-color:yellow;
max-height:20px;
font-size:20px;
font-weight:bold;
text-align:center;
color:black;
padding:5px;
}
.ks-content{
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
background-color:grey;
font-size:20px;
font-weight:bold;
text-align:center;
color:black;
padding:5px;
height:100%;
}
.ks-wrapper .ks-overlay {
transition: visibility 0s, opacity 0.5s ease-in-out;
position: absolute;
color: yellow;
background-color: green;
width: 97.5%;
height: 105px;
visibility: hidden;
opacity: 0;
border-radius:10px;
padding:10px;
overflow:hidden;
}
.ks-wrapper:hover .ks-overlay {
visibility: visible;
opacity: 1;
}
<div class="ks-wrapper">
<div class="ks-button">
<div class="ks-header">
Header
</div>
<div class="ks-content">
Text
</div>
</div>
<div class="ks-overlay">
"K"
</div>
</div>
Might be you are saying about .ks-overlay which overflow browser width after certain screen size, if so then that's because of padding added in that, use css box-sizing property as below,
The box-sizing property is used to alter the default CSS box model
used to calculate width and height of the elements.
.ks-wrapper {
position: relative;
float: left;
height: 85px;
width: 100%;
}
.ks-button {
position: absolute;
color: white;
width: 100%;
height: 100%;
}
.ks-header{
border-top-left-radius:10px;
border-top-right-radius:10px;
background-color:yellow;
max-height:20px;
font-size:20px;
font-weight:bold;
text-align:center;
color:black;
padding:5px;
}
.ks-content{
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
background-color:grey;
font-size:20px;
font-weight:bold;
text-align:center;
color:black;
padding:5px;
height:100%;
}
.ks-wrapper > .ks-overlay {
transition: visibility 0s, opacity 0.5s ease-in-out;
position: absolute;
color: yellow;
background-color: green;
width: 100%;
height: 85px;
visibility: hidden;
opacity: 0;
border-radius:10px;
padding:10px;
overflow:hidden;
left:0;
box-sizing:border-box;
}
.ks-wrapper:hover .ks-overlay {
visibility: visible;
opacity: 1;
}
<div class="ks-wrapper">
<div class="ks-button">
<div class="ks-header">
Header
</div>
<div class="ks-content">
Text
</div>
</div>
<div class="ks-overlay">
"K"
</div>
</div>
I have a little problem that i can't resolve, cause i want use solo CSS. I just want to do the opposite of what my code does, but i couldn't found the way to do it. That's my code:
HTML:
<div class="central1">
<div id="central_imgl">
<img class="bottom" src="images/kostnic_central1.jpg" width="370px" height="400px"/>
<img class="top1 hover" src="images/kostnic.jpg" width="370px" height="400px"/>
</div>
<div id="central_imgr">
<img class="bottom" src="images/kostnic_central2.jpg" width="370px" height="400px"/>
<img class="top1 hover" src="images/kdata2.jpg"/>
</div>
</div>
CSS:
div.central1{
background: black;
display: block;
position: absolute;
width: 740px;
height: 400px;
top:190px;
left:350px;
color: white;
}
#central_imgl {
position:relative;
float: left;
width: 50%;
height: 100%;
margin:0 auto;
}
#central_imgl img {
position:absolute;
left:0;
width: 368px;
height: 400px;
-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;
}
#central_imgl img.top1:hover {
opacity:0;
}
(And the same for central_imgr with float:right)
Now I want to change the displayed img on 'central_imgr' when i hover central_imgl, keeping the frontal img of central_imgl, and vice versa.
Thanks all!
DEMO
css code:
*{
box-sizing:border-box;
}
div.central1{
background: black;
display: block;
position: absolute;
width: 740px;
height: 400px;
top:190px;
left:350px;
color: white;
border:4px solid black;
overflow:hidden;
}
[id^=central] {
position:relative;
float: left;
width: 50%;
height: 100%;
}
[id=hiddenDiv]{
position:absolute;
right: 0;
width: 50%;
height: 100%;
z-index:1;
}
img {
position:absolute;
left:0;
top:0;
width: 100%;
height: 400px;
transition: opacity 1s ease-in-out;
}
#central_imgl .top1:hover {
opacity:0;
}
#central_imgl:hover + [id=central_imgr] .hover{
opacity:0;
}
[id=hiddenDiv]:hover + #central_imgl .top1{
opacity:0;
}
html code:
<div class=central1>
<div id=hiddenDiv></div>
<div id="central_imgl">
<img class=bottom src="https://scontent-b-fra.xx.fbcdn.net/hphotos-frc3/l/t1.0-9/1604926_659171170797962_1284145215_n.jpg" width="370px" height="400px"/>
<img class="top1 hover" src="https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10154320_659171017464644_1223781208_n.jpg" width="370px" height="400px"/>
</div>
<div id=central_imgr>
<img class=bottom src="https://scontent-b-fra.xx.fbcdn.net/hphotos-prn2/t1.0-9/1234076_659170960797983_1698005470_n.jpg" width="370px" height="400px"/>
<img class="top1 hover" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/t1.0-9/10156133_658968587484887_710971290_n.jpg"/>
</div>
</div>
I'm using the following CSS code to do a rollover effect with text:
.thumb {
position:relative;
}
.thumb img:hover {
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.thumb:hover {
background:#f00;
}
.thumb span {
z-index:-10;
position:absolute;
top:10px;
left:10px;
}
.thumb:hover span {
z-index:10;
color:#fff;
}
HTML code:
<div class="thumb">
<img src="thumbnail.jpg" />
<span>Text</span>
</div>
Everything is working well except when I hover over the text: the rollover effect disappears and I can see the image again.
Any ideas?
Thanks in advance
I guess that is too much of styles for simple overlay effect, if you are interested to see a demo I've made from scratch than here you go
Demo
HTML
<div class="wrap">
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="overlay">Hello This Is So Simple</div>
</div>
CSS
.wrap {
position: relative;
display: inline-block;
}
.overlay {
opacity: 0;
background: rgba(0,0,0,.8);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: opacity 1s;
color: #fff;
text-align: center;
}
.wrap:hover .overlay {
opacity: 1;
}