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>
Related
I'm trying to apply an effect to my pics when I put the cursor over them. What I want is a greyscale filter and a that a text appears. I've used this code:
HTML:
<div class="upic_wrap">
<img class="upic" src="foo.jpg">
<div class="upic_text">Avenida Central</div>
</div>
CSS:
.upic_text {
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
visibility:hidden;
opacity:0;
}
.upic:hover {
opacity:0.5;
-webkit-filter:grayscale(100%);
filter:grayscale(100%);
}
.upic_wrap:hover .upic_text {
visibility:visible;
opacity:1;
color:#000;
text-align:center;
text-shadow:1px 1px yellow;
}
I get this:
(out of pic)
(hover pic, yes! what I want!)
Which is perfect, but the problem is when the cursor is over the text. That's what happen:
(hover text, noooo!)
I would like to always get the effect of "hover pic" (the second) when I hover the pic or the text.
How could I solve that?
Thanks!
This should fix the issues. The thing is to set :hover of the .upic_wrap selector.
This snippet is based on your initial code, but I think it needs some changes to look like the pictures you posted.
.upic_text {
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
opacity:0;
}
.upic_wrap:hover .upic {
opacity:0.5;
-webkit-filter:grayscale(100%);
filter:grayscale(100%);
}
.upic_wrap:hover .upic_text {
visibility:visible;
opacity:1;
color:#000;
text-align:center;
text-shadow:1px 1px yellow;
}
<div class="upic_wrap">
<img class="upic" src="https://i.stack.imgur.com/DKgfx.png">
<div class="upic_text">Avenida Central</div>
</div>
.upic_wrap
{
border: 1px solid red;
width: 40%;
position: relative;
cursor: pointer;
}
.upic
{
width: 100%;
height: 250px;
}
.upic_text {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.upic_wrap:hover .upic {
opacity:0.5;
-webkit-filter:grayscale(100%);
filter:grayscale(100%);
}
.upic_wrap:hover .upic_text {
display: block;
opacity:1;
color:#000;
text-align:center;
text-shadow:1px 1px yellow;
}
<div class="upic_wrap">
<img class="upic" src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png">
<div class="upic_text">Avenida Central</div>
</div>
your query is convert in to fully responsive and solved to something changes in css.
Is there anyway to create similar to the attached with HTML/CSS, that works responsive? without using am image?
Unable to get the oragne border & content added in
CSS
.left {
border-bottom: 70px solid #3488b1;
border-right: 1000px solid transparent;
height: 0;
position: absolute;
bottom:0;
width: 1px;
opacity:.5;
}
.right {
border-bottom: 70px solid #3488b1;
border-left: 1000px solid transparent;
height: 0;
width: 1px;
position: absolute;
bottom:0;
}
.footer {height:100px;}
& HTML
<div class="footer">
<span class="left"> </span>
<span class="right"></span>
</div>
One way is to use transforms.
html, body {
height:100%;
width:100%;
}
#responsive {
position:relative;
height:25%;
width:80%;
overflow:hidden;
min-height: 80px;
}
#triOne {
position:absolute;
background-color:aqua;
height:300%;
width:300%;
transform: rotate(10deg);
top:55%;
left:-100%;
}
#triTwo {
position:absolute;
background-color:blue;
height:300%;
width:300%;
border: 5px solid orange;
transform: rotate(-10deg);
top:45%;
right:-100%;
}
#content {
position:absolute;
right:10px;
bottom:10px;
color:white;
}
<div id="responsive">
<div id="triOne"></div>
<div id="triTwo"></div>
<div id="content">content</div>
</div>
It's not really responsive, but I think with a few tweaks you should be able to get it the way you want it.
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>
Much like this question here (How would I reverse a css transition property width?) I want to reverse the way my transition goes.
Unfortunately it's not working for me! It might be that my code is a little more complex then that. Can anyone lend me a hand?
JSFiddle = http://jsfiddle.net/cPUuL/4/
CSS:
.Imgpad
{
padding-top:2px;
padding-left:2px;
padding-bottom:3px;
padding-right:2px;
position:absolute;
z-index:1;
}
.hidetext {
float:right;
display:none;
margin:0;
padding:0;
color:#CC0000;
font-size:30px;
font-family:"Juice ITC";
}
.Rightbox
{
width:100px;
height:100px;
background:black;
transition: left 2s, width 2s;
position:absolute;
}
.Rightbox:hover{
width:250px;
}
.Rightbox:hover > .hidetext {
display:block;
}
HTML:
</div>
<div class="content-wrapper">
<div id="Divpos5">
<div class="Rightbox">
<img class="Imgpad" src="http://b.vimeocdn.com/ps/588/58832_300.jpg" height="96" width="96" alt="Faye">
<p class="hidetext">Raven Faye<br><font color="#9900CC"></font>~The Sorceress
</div>
</div>
Thanks
-Asteria
Not sure if that's what you were looking for but here's what I did...
http://jsfiddle.net/cPUuL/5/
The css:
.Imgpad {
padding-top:2px;
padding-left:2px;
padding-bottom:3px;
padding-right:2px;
}
.hidetext {
position: absolute;
left: 0px;
top: 0px;
padding: 2px;
margin: 0px;
color:#CC0000;
font-size:30px;
font-family:"Juice ITC";
background: #000;
height: 96px;
width: 96px;
overflow: hidden;
z-index: -1;
transition: left 0.5s, width 0.5s;
}
.Rightbox {
width: 100px;
height: 100px;
background:black;
position: relative;
}
.Rightbox:hover > .hidetext {
left: 100px;
width: 250px;
transition: left 1s, width 1s;
}
As you can see the transition speed on the .Rightbox:hover > .hidetext; is slower than the one without :hover, It means that the reverse transition will change faster than on .Rightbox:hover > .hidetext. In other words, the reverse transition is when you move your mouse out of the Rightbox.
And the html fixed. You have lots of unclosed tags and the font tag that is clearly useless there.
<div class="Rightbox">
<img class="Imgpad" src="http://b.vimeocdn.com/ps/588/58832_300.jpg" height="96" width="96" alt="Faye" />
<p class="hidetext">Raven Faye<br />~The Sorceress</p>
</div>
Here's an updated fiddle that change the right property since if you want to make it move to the left, you'll have to change the right corner.
http://jsfiddle.net/cPUuL/6/
The css changed is:
.Rightbox:hover > .hidetext {
right: 100px;
width: 250px;
transition: left 1s, width 1s;
}
.hidetext {
...
right: 0px; /* instead of left: 0px; */
...
}
I also added a margin to Rightbox so we can see the change.
Using this css you can also make a cool transition:
.Rightbox,
.Imgpad,
.hidetext {
transition: left 1s, width 1s;
}
.Rightbox:hover,
.Rightbox:hover .Imgpad,
.Rightbox:hover .hidetext {
transition: left 0.5s, width 0.5s;
}
.Imgpad {
z-index: 2;
position: absolute;
top: 0px;
right: 0px;
padding-top:2px;
padding-left:2px;
padding-bottom:3px;
padding-right:2px;
}
.hidetext {
position: absolute;
top: 2px;
left: 2px;
right: 102px;
bottom: 2px;
margin: 0px;
color: #CC0000;
font-size:30px;
font-family:"Juice ITC";
overflow: hidden;
z-index: 1;
white-space: nowrap;
}
.Rightbox {
width: 100px;
height: 100px;
background:black;
position: relative;
}
.Rightbox:hover {
width: 404px;
}
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;
}