Well, my HTML looks like this, when I hover over the image the two checkboxes with a black background should be visible.
<img class='itemImage'/>
<div class='hoverDisplay'>
<div class="selctImgInptWrapper big">
<input class="selctImgInpt" type="checkbox" value="">
</div>
<div class="selectWrapperImgRetouch big">
<input class="selctImgRetouch" type="checkbox" value="">
</div>
</div>
My CSS
.hoverDisplay {
height: 75px;
font-size: 0.80rem;
background-color: rgba(44, 44, 44, 0.3);
background: rgba(44, 44, 44, 0.3);
color: #ffffff;
width: 95%;
bottom: 8px;
position: absolute;
padding: 2px 5px;
display: none; }
.hoverDisplay .selctImgInptWrapper {
bottom: 50px;
position: absolute;
padding: 2px 5px;
}
.hoverDisplay .selectWrapperImgRetouch {
bottom: 30px;
position: absolute;
padding: 2px 5px; }
.itemImage:hover ~ .hoverDisplay {
display: block; }
It works fine when I hover on the image, the two checkboxes are visible, the problem starts when I hover on the checkboxes it starts to flicker
I am not able to figure out the false scenario here.
When I move my cursor to the black are which is hoverDisplay class it starts to flicker and I am not able to check any checkboxes. While moving my
Simply because you will loss the hover when you want to use the input as you are no more hovering the image but another element which is a sibling. To avoid this add another property to keep the display:block state:
.itemImage:hover ~ .hoverDisplay,
.hoverDisplay:hover {
display: block;
}
The problem is that you show the checkboxes when you hover over the image. And then when you hover the checkboxes ( because they are not inside the image ( they are impossible to be) ) you hover out the image and css tries to hide them. But checkboxes are on top of the image, so the flickering happens.
You basically hover in and out the image in the same time.
One solution would be to wrap the img and checkboxes in a div and show the checkboxes when you hover over the div not just the img.
.img-container {
position:relative;
width:350px;
}
.hoverDisplay {
height: 75px;
font-size: 0.80rem;
background-color: rgba(44, 44, 44, 0.3);
background: rgba(44, 44, 44, 0.3);
color: #ffffff;
width: 95%;
bottom: 8px;
position: absolute;
padding: 2px 5px;
display: none;
}
.hoverDisplay .selctImgInptWrapper {
bottom: 50px;
position: absolute;
padding: 2px 5px;
}
.hoverDisplay .selectWrapperImgRetouch {
bottom: 30px;
position: absolute;
padding: 2px 5px;
}
.img-container:hover .hoverDisplay {
display: block;
}
<div class="img-container">
<img class="itemImage" src="http://via.placeholder.com/350x150">
<div class='hoverDisplay'>
<div class="selctImgInptWrapper big">
<input class="selctImgInpt" type="checkbox" value="">
</div>
<div class="selectWrapperImgRetouch big">
<input class="selctImgRetouch" type="checkbox" value="">
</div>
</div>
</div>
Related
I've a tile with an input of type radio, a label and a span text below this two elements. The input and label are connected with an id. They should be next to each other. The span should be directly below the label. This works so far and my layout matches. If I click on the input or on the label, the radio gets selected. Now what I'd like to do is, to select the radio by clicking on the tile, no mather where. So every click on the tile should select my radio. I would like to solve this with pure HTML/CSS without using JS, if possible. The only idea I had, is to give position: relative; to the radio and position: absolute; to the radio__wrap and the label and make them have width/height of 100%, so I can pull over the label over the whole tile. This idea crashed my layout (hard do position the span correctly). Is there a way to solve this by using pure HTML/CSS. Below is my snippet:
.tile {
border: 1px solid transparent;
border-radius: 10px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
margin-bottom: 30px;
}
.tile__wrap {
position: relative;
}
.radio {
padding: 24px 16px 16px;
display: flex;
flex-direction: column;
position: relative;
}
.radio__wrap {
margin-bottom: 10px;
}
.radio__label {
background-color: lightblue;
position: relative;
}
.radio__text {
padding-left: 24px;
display: block;
}
.tile--clickable .radio__wrap {
position: relative;
width: 100%;
height: 100%;
z-index: 5;
}
.tile--clickable .radio__label {
width: 100%;
height: 100%;
}
<div class="tile">
<div class="tile__wrap">
<div class="radio">
<div class="radio__wrap">
<input class="radio__input" id="radio01" type="radio">
<label class="radio__label" for="radio01">I'm the label</label>
</div>
<span class="radio__text">I'm the text</span>
</div>
</div>
</div>
That might sound odd, but essentially, I'm trying to make it so when i click on a designated button/spot on a page, it opens up a CSS border box that contains information. I know how to make it hidden, but like when you hover and it appears using the :hover attribute, i want to make it stay permanently visible after the hover transition is complete. Can this be done with CSS? Or is it going to require Javascript? Here is the code I'm using as a starter base.
#information {
border: solid 2px #FF8000;
border-radius: 20px;
position: absolute;
height: 48%;
width: 24%;
left: =0.6%;
top: 0.7%;
padding: 0.4%;
color: #FFFFFF;
background-color: rgba(114, 70, 0, 0.3);
overflow: hidden;
}
#information:hover {
left: 74.6%;
}
<div id="information">
<div style=" height: 325px; overflow-x: hidden;" align="left">
<i>Information</i>
<br><br>
</div>
</div>
Sorry, I'm new to the site, and I'm still working out how to format my posts.
#information {
border: solid 2px #FF8000;
border-radius: 20px;
position: absolute;
height: 48%;
width: 24%;
left: =0.6%;
top: 0.7%;
padding: 0.4%;
color: #FFFFFF;
background-color: rgba(114, 70, 0, 0.3);
overflow: hidden;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
left: 74.6%;
}
<input type="radio" id="box">
<label id="information" for="box">
<div style=" height: 325px; overflow-x: hidden;" align="left">
<i>Information</i>
<br><br>
</div>
</label>
My solution is similar to what #Michael Coker suggested. We can use radio button instead to disable click on label after first click. I removed the inner div inside #information to make HTML W3C valid.
I'm trying to make it so when i click on a designated button/spot on a page, it opens up a CSS border box that contains information.
You can use the "checkbox hack" to pull off changes like this in CSS. https://css-tricks.com/the-checkbox-hack/
#information {
border: solid 2px #FF8000;
border-radius: 20px;
position: absolute;
height: 48%;
width: 24%;
left: =0.6%;
top: 0.7%;
padding: 0.4%;
color: #FFFFFF;
background-color: rgba(114, 70, 0, 0.3);
overflow: hidden;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + label {
left: 74.6%;
}
<input type="checkbox" id="box">
<label id="information" for="box">
<div style=" height: 325px; overflow-x: hidden;" align="left">
<i>Information</i>
<br><br>
</div>
</label>
I'm trying to add an overlay box at the bottom of a textarea. Positioning the overlay box was easy, but now I want the textarea content to never overlap the overlay box.
My first approach was adding padding-bottom so that the text never reaches the bottom of the textarea, where the overlay box is placed. However, as I type, the text will go under it. Also, scrolling up will cause the same undesired behavior.
Edit:
In response to some of the answers that partially solve my issue. I'm trying to make the textarea look as native as possible, so border color changing on focus would be necessary as well.
.container {
position: relative;
width: 110px;
}
textarea {
width: 100%;
height: 50px;
resize: none;
}
texarea.with-padding {
padding-bottom: 1em;
}
span {
position: absolute;
bottom: 5px;
width: 100%;
height: 1em;
background: rgba(255,0,0,0.5);
}
<div class="container">
<textarea name="" id="">I want this to never go under the red box.</textarea>
<span></span>
</div>
<div class="container">
<textarea class="with-padding" name="" id="">I tried with padding-bottom, but it doesn't work either.</textarea>
<span></span>
</div>
You can use a <div> container (which holds your textarea and overlay) as a fake border and remove the border of textarea. Just as shown in the snippet below:
$('textarea').on('focus', function() {
$('.textarea-holder').css('border-color', 'rgba(255, 0, 0, 0.5)');
});
$('textarea').on('blur', function() {
$('.textarea-holder').css('border-color', '#333');
});
.textarea-holder {
border: 1px solid #333;
display: inline-block;
}
.textarea-holder textarea {
display: block;
resize: none;
border: none;
}
textarea:focus {
outline: none;
}
.textarea-holder .overlay {
width: 100%;
height: 20px;
background: rgba(255, 0, 0, 0.5);
}
body {
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textarea-holder">
<textarea rows="6"></textarea>
<div class="overlay"></div>
</div>
Hope this helps!
You can simply add a bottom-border: 1em to the textarea to imitate the span element.
Here is a working example: http://codepen.io/anon/pen/woKyvy#anon-login
.container {
position: relative;
width: 200px;
}
textarea {
width: 100%;
height: 50px;
border-bottom: 1em solid rgba(255,0,0,0.5);
}
<div class="container">
<textarea>Try typing. The cursor will never end up under the red line.</textarea>
</div>
So I went ahead and wrote it down:
Removed the border and reset some styles of textarea
Added the fake border to the container and removed the positioning of the span and made it a block element.
See code below:
.container {
position: relative;
width: 110px;
border: 1px solid;
}
textarea {
width: 100%;
height: 50px;
resize: none;
border:none;
outline:none;
padding: 0;
}
.container span {
display:block;
width: 100%;
height: 1em;
background: rgba(255, 0, 0, 0.5);
}
<div class="container">
<textarea name="" id="">I want this to never go under the red box.</textarea>
<span></span>
</div>
I finally found a solution to this riddle thanks to Saurav Rastogi's and eyetea's answers. Both were almost perfect, but failed to make the textarea have its border highlighted on focus. I've managed to keep this behavior using outline.
I think both approaches are useful as they allow for two different border highlight on focus. One leaving the overlay outside, using a div wrapper strategy, and the one leaving it inside, using a very thick border-bottom.
/* Inner border on focus solution */
.textarea-wrapper {
border: 1px solid gray;
display: inline-block;
}
.textarea-wrapper textarea {
display: block;
border: none;
}
.textarea-wrapper textarea:focus {
outline: 1px solid green;
outline-offset: 0;
}
.textarea-wrapper .overlay {
width: 100%;
height: 20px;
background: rgba(255, 0, 0, 0.5);
}
/* Outer border on focus solution */
textarea.bottom-padded {
border-bottom: 21px solid rgba(255,0,0,0.5);
outline: 1px solid gray;
outline-offset: -1px;
}
textarea.bottom-padded:focus {
outline-color: green !important;
}
<div class="textarea-wrapper">
<textarea rows="3">Inner border on focus</textarea>
<div class="overlay"></div>
</div>
<textarea rows="3" class="bottom-padded">Outer border on focus</textarea>
HTML
<div class="select">
<div>
<label for="kitty" class="kitty-label kitty-label-1 l-center">
</label>
<input type="checkbox" name="cats" value="1">
<label>Kitty One</label>
</div>
<div class="cly-pam" style="width:50%; float: left">
<label for="kitty" class="kitty-label kitty-label-2 l-center">
</label>
<input type="checkbox" name="cats" value="2">
<label>Kitty Two</label>
</div>
</div>
<div>
css
label{
cursor: pointer;
}
.kitty-label{
position: relative;
width: 100%;
&:hover,
&:focus,
&:active{
border-radius: 6px solid #fff;
}
}
.kitty-label-1{
display: inline-block;
background: url(../img/kitty1.png) no-repeat 0 0;
height: 142px;
width: 142px;
}
.kitty-label-2{
display: inline-block;
background: url(../img/kitty2.png) no-repeat 0 0;
height: 144px;
width: 144px;
}
.select input[type="checkbox"]{
display: none;
&:checked + label:before{
background: url(../img/tick.png) no-repeat;
}
}
The labels would have background image but the issue is that when focus, active or hover, the border-radius does not appear behind the images. Also the kitty images do not have border-radius edges. Wonder if should have image in circle shape or css3 can do that?
Also checkbox seems not to show the tick or anything. Tried to click on label (as in kitty image), tick doesn't appear?
Not sure where I might go wrong. Help will be very much appreciated.
Updated
<div>
<input type="radio" name="type" value="designer" id="designer">
<label for="designer" id="designer" class="inline-block testsign" style="background: url(../img/face.png) no-repeat center;">
</label></div>
CSS
.testsign{
width: 170px;
height: 170px;
border-radius: 100%;
&:hover,
&:focus,
&:active{
border: 15px solid #f3f3f3;
}
}
// [type="radio"]:not(:checked),
// [type="radio"]:checked {
// visibility: hidden;
input[type="radio"]:checked + label:after {
content:"";
display: block;
position: absolute;
height: 60px;
width: 60px;
background: #f0f1f1 url(../img/tick.png) no-repeat center center;
border-radius: 100%;
border: 10px solid #fff;
}
Attempted the example from #misterMan
Couldn't get the label:after to be positioned at the right bottom - tried top and left to position the tick circle, but the problem is that when checked, it will appear in the position which followed top and left. So if check extra element or image, tick circle will appear in the same place which is not right. Removed the top and left. There is no way to have tick circle positioned in right bottom appearing in each label whenever radio is checked?
Also another problem is that when border radius on the label is hovered on background image, and if checked radio, the tick circle (label:after) will appear, the tick circle will be "jumpy" whenever hovered on label. How to stop the jump? I tried to add absolute center and position relative but the labels will be out of the container.
Help or insight will be appreciated.
I love this type of stuff so I made this for you, if you are still looking for a solution. I have added the images with <img> as they are not decoration, they are primary content :)
It's nice and simple, and I think does what you want. Let me know!
Updated
Have an updated fiddle!
HTML
<form>
<input type="checkbox" id="pic1" />
<label for="pic1">
<img src="http://www.placehold.it/200" />
</label>
<input type="checkbox" id="pic2" />
<label for="pic2">
<img src="http://www.placehold.it/200" />
</label>
</form>
CSS
body {
margin: 0;
}
input[type=checkbox] {
display: none;
}
label {
position: relative;
display: block;
width: 200px;
cursor: pointer;
float: left;
margin: 10px 0 10px 10px;
}
input[type=checkbox] + label img:hover {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
input[type=checkbox]:checked + label img {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
input[type=checkbox]:checked + label img:hover {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
input[type=checkbox]:checked + label:after {
content:"";
display: block;
position: absolute;
bottom: 10px;
right: 10px;
height: 50px;
width: 50px;
background: url(http://i.imgur.com/i7379jf.png) no-repeat right bottom;
background-size: 50px;
}
input[type=checkbox]:checked + label:hover:after {
}
How to :target 1 little red box to do transition into a yellow circle by clicking hyperlink and then make the same little box to transition into a blue square?
Here is my CSS for the little red square:
#Redsquare{
height: 15px;
width: 15px;
background-color: rgb(255,0,0);
position: absolute;
top: 330px;
left: 640px;
transition: all 0.5s linear;
}
Here is the code which targets the #Redsquare into yellow circle.
#Redsquare:target{
height: 300px;
width: 300px;
border-radius: 50%;
background-color: rgb(255,255,0);
top: 200px;
left: 500px;
}
But I want the same little circle to transform into a Bluesquare as well by pressing another button.
This can be done. But it requires nesting in the HTML like shown in the code below. Please do not use this approach if you need the same div to be transformed more than two or three times as the markup will become too messy.
Basically what we are doing here is as follows:
The element that will be transformed is the div with class as box. But how and what it would be transformed to depends on the link that is clicked and the associated target.
When the 1st link is clicked, the outermost div with Yellowcircle is the target. As per the CSS, an element with class box will be transformed to a yellow circle when the target is Yellowcircle.
When the 2nd link is clicked, the Bluesquare div becomes the target and as per CSS in this case, the box should become a blue square.
Finally when the 3rd link is clicked, the target is the general #, so the default .box CSS style will be applied and it goes back to being a red square.
There are other alternatives but they involve JavaScript.
.box {
height: 150px;
width: 150px;
background-color: rgb(255, 0, 0);
transition: all 0.5s linear;
}
#Yellowcircle:target .box {
border-radius: 50%;
background-color: rgb(255, 255, 0);
}
#Bluesquare:target .box {
background-color: rgb(0, 0, 255);
}
/* Just for demo */
a {
position: relative;
margin: 0px 4px;
text-decoration: none;
font-family: Calibri;
font-variant: small-caps;
color: crimson;
}
a:after {
position: absolute;
content: "|";
padding: 0px 4px;
}
a:last-of-type:after {
display: none;
}
<div id='Yellowcircle'>
<div id='Bluesquare'>
<div class='box'>
</div>
</div>
</div>
<a href='#Yellowcircle'>Transform to yellow circle</a>
<a href='#Bluesquare'>Transform to blue square</a>
<a href='#'>Go back to default</a>
This is what I meant by markup becoming messy while needing to transform into more than 3 shapes. Notice how we have to introduce an extra level for each extra shape that is needed.
.box {
height: 150px;
width: 150px;
background-color: rgb(255, 0, 0);
transition: all 0.5s linear;
}
#Yellowcircle:target .box {
border-radius: 50%;
background-color: rgb(255, 255, 0);
}
#Bluesquare:target .box {
background-color: rgb(0, 0, 255);
}
#Greenoval:target .box {
border-radius: 75px 100px;
background-color: rgb(0, 255, 0);
}
/* Just for demo */
a {
position: relative;
margin: 0px 4px;
text-decoration: none;
font-family: Calibri;
font-variant: small-caps;
color: crimson;
}
a:after {
position: absolute;
content: "|";
padding: 0px 4px;
}
a:last-of-type:after {
display: none;
}
<div id='Yellowcircle'>
<div id='Bluesquare'>
<div id='Greenoval'> <!-- notice how for each shape we need to add an extra level -->
<div class='box'>
</div>
</div>
</div>
</div>
<a href='#Yellowcircle'>Transform to yellow circle</a>
<a href='#Bluesquare'>Transform to blue square</a>
<a href='#Greenoval'>Transform to green oval</a>
<a href='#'>Go back to default</a>