I'm trying to position a checkbox at the bottom right of a div container. The container will grow in height on hover, and I want the checkbox to be sticky so that it remains at the bottom right as the div grows.
I'm having some real trouble getting the checkbox to be in the bottom right.
Here's my code, and a Fiddle.
<div class="objectWrap">
<div class="calendarObject">
<label class="objectTitle" for="chkOb2">Tasks</span>
<input type="checkbox" id="chkOb2" />
</div>
</div>
.objectWrap {
position:relative;
float:left;
height:75px;
margin-bottom:15px;
}
.objectWrap:not(:last-child) {
margin-right:15px;
}
.objectWrap:hover {
cursor:pointer;
}
.calendarObject {
position:relative;
width:72px;
height:75%;
background-color:#f5f5f5;
border-radius:5px;
transition: height 400ms;
-webkit-transition: height 400ms;
}
.calendarObject label.objectTitle {
position:absolute;
top:3px;
left:3px;
font-size:13px;
color: #8998a4;
}
.calendarObject input[type="checkbox"] {
position:absolute;
bottom:0px;
right:0px;
}
.calendarObject:hover {
height:100%;
transition: height 400ms;
-webkit-transition: height 400ms;
}
You have a bug in your code. </span> should be </label>.
Corrected HTML:
<div class="objectWrap">
<div class="calendarObject">
<label class="objectTitle" for="chkOb2">Tasks</label>
<input type="checkbox" id="chkOb2" />
</div>
</div>
Corrected JS Fiddle
Your markup is not properly nested.. your label tag needs a closing label tag.. not a closing span tag.
Related
I have 9 divs inside a flex container.
What I'm trying to achieve is an effect where the div you're hovering over 'pushes' the divs on the right further right and the divs on the left further left. I'd like to do this using nth-child selector so that I only have to write 2 styles for each div.
For now, I just have it partialy working on the red div as a proof of concept.
Achieving the first part was easy, when you hover over the red div, the 4 divs to the right of it are pushed to the right using translateX(30px)
That css looks like this.
.team-card:nth-child(5):hover ~ .team-card:nth-child(n+4){
transform: translateX(30px);
}
Per this article on css tricks, https://css-tricks.com/useful-nth-child-recipies/, doing the first 4 should also be easy.
.team-card:nth-child(5):hover ~ .team-card:nth-child(-n+4){
transform: translateX(-30px);
}
But this doesn't work. I've tried removing the first css selector, thinking that maybe you couldn't have more than a single hover psuedo-state on a class. But that didn't do anything.
Then I removed the hover state so I just had this.
.team-card:nth-child(-n+4){
background-color:yellow;
}
And that worked. So does nth-child using -n not work when it has a psuedo-state?
Is there a pure css solution to achieve this effect when hovering? Or will I have to resort to javascript?
EDIT:
Here is the fiddle that I forgot to link to.
https://jsfiddle.net/q0x51kmw/1/
You can do this very simply, without the transform property:
.team-cards-container {
display: flex;
margin: 55px 2.5%;
height: 300px;
}
.team-card {
flex: 1;
transition: all .2s ease-in-out;
}
.team-card:hover {
margin-right: 30px;
}
/*Colors*/
.team-card:nth-child(3n+1) {background-color: #949300}
.team-card:nth-child(3n+2) {background-color: #8A1B61}
.team-card:nth-child(3n+3) {background-color: #236192}
.team-card:nth-child(5) {background: #ff0000}
<div class="team-cards-container">
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
</div>
Is this what you mean?
.team-cards-container hover moves all children -30px
current (child) .team-card hover overwrites to 0px
all next siblings to current .team-card hover are overwritten +30px
.team-cards-container{
display:flex;
width:95%;
margin-left:auto;
margin-right:auto;
padding-top:55px;
}
/*Colors*/
.team-card:nth-child(3n+1){
height:300px;
width:230px;
background-color:#949300;
}
.team-card:nth-child(3n+2){
height:300px;
width:230px;
background-color:#8A1B61;
}
.team-card:nth-child(3n+3){
height:300px;
width:230px;
background-color:#236192;
}
/*Middle*/
.team-card:nth-child(5){
background:red;
}
/*Universals*/
.team-card{
transition: all .2s ease-in-out;
}
.team-cards-container:hover .team-card {
transform: translateX(-30px);
}
.team-cards-container .team-card:hover {
transform: translateX(0);
}
.team-card:hover ~ .team-card {
transform: translateX(30px);
}
<div class="team-cards-container">
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
<div class="team-card"></div>
</div>
css do not allow you to style previous sibling element. You are using '~' but '~' can only be used to style next sibling elements
you are doing it the wrong way
replace your css with this
.team-cards-container{
display:flex;
width:95%;
margin-left:auto;
margin-right:auto;
padding-top:55px;
}
/*Colors*/
.team-card:nth-child(3n+1){
height:300px;
width:230px;
background-color:#949300;
}
.team-card:nth-child(3n+2){
height:300px;
width:230px;
background-color:#8A1B61;
}
.team-card:nth-child(3n+3){
height:300px;
width:230px;
background-color:#236192;
}
/*Middle*/
.team-card:nth-child(5){
background:red;
}
/*Universals*/
.team-card{
transition: all .2s ease-in-out;
}
.team-cards-container:hover > .team-card{
transform:translateX(-20px);
}
.team-card:hover{
transform:translateX(0px)!important;
}
.team-card:hover~.team-card{
transform:translateX(20px)!important;
}
I have 2 images placed one on top of another, and what I'm trying to do is to change the opacity based on hover on parent.
Meaning that by default hovethumb's opacity is set to 0. But when I hover on index then hoverthumb's opacity should be changed to 1 and bdata's opacity should be changed to 0.5
But the styling doesn't work... The stylings I use are div.productindex:hover > div.hoverthumb & div.productindex:hover > div.bdata
Can someone help me figure out to target them correctly?
My php code :
<div class="index ">
<div class="bdata">
<div class="thumb"><?php the_post_thumbnail('')?></div>
</div>
<div class="hoverthumb clearfix"><img src="<?php echo get_template_directory_uri(); ?>/images/buy.png" width="50px" ;></div>
</div>
also how to align the image exactly in the centre of the box index
.index{
float: left;
height: auto;
padding-bottom:10px;
margin-bottom:20px;
}
.hoverthumb{
position:absolute;
opacity:0;
clear:both;
}
div.index:hover > div.bdata{
opacity:0.5;
border: thin outset #EC008C;
}
div.index:hover > div.hoverthumb{
opacity:1;
}
.thumb{
width:100%;
}
.thumb img{
width:100%;
height: auto;
}
I was wondering it it is possible to use a nested ":target" directive to modify elements on the page with pure CSS. I am bringing in a form text area which is absolutely positioned inside a div element (.container). When the text area appears, I want 3 things:
1) The open link to dissapear
2) The close link to appear
3) The contaner div to expand with the form element
I have been trying this by nesting the :target element inside my .container but it is not working. Is this possible?
<div class="container" id="container">
<h4>Show close</h4>
<div id="comments">
<form name="myForm">
<p>Write your comment:<br />
<textarea name="myTextarea"></textarea></p>
</form>
</div>
</div>
CSS
.container{
position:relative;
background:pink;
&:target {
transition: all 1s ease;
a#open { display: none; }
a#close {display: block;}
}
a#close { display: none; }
}
#comments {
position:absolute;
height:200px;
width:400px;
background:yellow;
left:-300%;
top:30px;
transition: all 1s ease;
}
#comments:target {
transition: all 1s ease;
left:20px;
}
JSFiddle here
What i'm trying to do is trigger a single style that contains transitions from two different styles both being mouse hover events.
I can use it using 1 of the 2 trigger styles but not both.
Example:
<div id="widget"></div>
<div id="tri" class="ibox">
<form id="trif" action="" method="get">
<input id="ipbox" type="text" name="i1" value="trialbox">
</form>
</div>
and CSS :
#widget {
position:absolute;
height:100px;
width:100px;
background-color:red;
}
#ipbox {
background-color:transparent;
position:absolute;
left:110px;
border:3px solid black;
padding-left:10px;
margin:0px;
height:40px;
width:300;
}
#widget img {
position:absolute;
top:40%;
left:45%;
width:100px;
height:100px;
-webkit-transform:scale(1, 1);
-webkit-transition-duration: 2s;
}
#widget:hover {
-webkit-transform:scale(4, 1.5);
-webkit-transition-duration: 1s;
}
#tri {
position:absolute;
opacity:0;
}
#widget:hover + #tri {
-webkit-transition-function:ease-out;
-webkit-transition-duration:3s;
-webkit-transition-delay:0.5s;
opacity:1;
}
with this piece of code i can trigger the transition of shape change and text box opacity. but after this i want to hover over the textbox and keep the changed shape of the box. I hope i'm clear with my question. Excuse any mistakes. Thanks in advance.
the running version : http://jsfiddle.net/ftBrW/
widget should #wrap #tri
So you keep hovering it.
#tri should be at opacity 1 by defaut and turned to zero onload.
With animation like :
#tri {animation : onloadifavailable 0s infinite ;}
#keyframes onloadifavailable {
0,100% {opacity:0;}
}
Then when you hover, #widget, you change animation name .
For hover :
#widget:hover #tri {
animation: showit 3s ;
}
#keyframes showit {
0% {opacity:0;}
100% {opacity:1}
}
HTML:
<div id="widget">
<div id="tri" class="ibox">
<form id="trif" action="" method="get">
<input id="ipbox" type="text" name="i1" value="trialbox">
</form>
</div>
</div>
What is important is not to set by defaut #tri at opacity:0; from the beginning. Keep in mind that a browser may not support animation.
Change this: #widget:hover + #tri to this: #tri:hover
I'm working on a multidevice web page, i want to make a CSS transition of a div (.carrousel) witch contains 3 other div (.bloc1 to 3) positionned horizontally using float left
First, only div 2 and 3 are shown (negatif left on .carrousel and overflow hidden on the container .global)
A clic on the link 'Show blocs {1, 2}' moves the .carousel to right and shows these blocs
To ensure the transition happens smoothly i've adopted the HTML structure below.
The problem is that the fixed elements are'nt positionned correctly in Chrome, IE8, Android 4.03 et 3.02
But under Firefox 15.0, IE9 and also IE7! things are working well...
Any suggestion on changing the HTML structure is welcome as the transition effect remain untouched... But i don't want to use some hacks or specific CSS by device
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* { margin:0; padding:0; }
a img { border:none; }
body { font-family:Tahoma; font-size:12px; }
p { margin:10px 0; }
.global { width:940px; overflow:hidden; position:relative; margin:20px auto; border:#F00 solid 1px; }
.carrousel { width:1660px; overflow:hidden; position:relative; top:0;
-webkit-transition: left .2s ease-in-out;
-moz-transition: left .2s ease-in-out;
-ms-transition: left .2s ease-in-out;
-o-transition: left .2s ease-in-out;
transition: left .2s ease-in-out; }
.bloc { float:left; padding:5px; margin:5px; text-aligh:center; }
.bloc1 { width:700px; height:400px; background-color:#F00; }
.bloc2 { width:200px; height:300px; background-color:#999; }
.nav { position:fixed; z-index:2; background-color:#F90; width:200px; }
.nav a { display:block; margin:10px 0; }
.bloc3 { width:700px; min-height:300px; position:relative; background-color:#FF0; }
.header { width:700px; height:50px; position:fixed; z-index:2; background-color:#6FF; }
.list { height:3000px; padding-top:50px; position:relative; z-index:1; background-color:#9C3; }
.carrousel.showblocs23 { left:-720px; }
.carrousel.showblocs12 { left:0; }
.carrousel.showblocs12 .header { position:relative; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<title>blocr</title>
</head>
<body>
<div class="global">
<div class="carrousel showblocs23">
<div class="bloc bloc1">
bloc 1
</div>
<div class="bloc bloc2">
bloc 2
<div class="nav">
fixed nav<br />
<a href="#" onclick="$('.carrousel').removeClass('showblocs23').addClass('showblocs12'); return false;">
Show blocs {1, 2}
</a>
<a href="#" onclick="$('.carrousel').removeClass('showblocs12').addClass('showblocs23'); return false;">
Show blocs {2, 3}
</a>
</div>
</div>
<div class="bloc bloc3">
bloc 3
<div class="header">
bloc 3 header fixed
</div>
<div class="list">
bloc 3 long list
</div>
</div>
</div><!-- /carrousel -->
</div><!-- /global -->
</body>
</html>
There are two main issues here, unless I misunderstand your intent.
It seems that you've mixed absolute and fixed positioning. The position: fixed property causes an element to be positioned relative to the browser window, not its parent div. You are looking for position: absolute for the .header and .list classes.
You are using z-index in places where it is not necessary. You can remove the z-index property from all of your classes. This reveals another issue, your .list class needs to have margin-top: 50px instead of padding-top: 50px. Padding fills in the area within the border of an element, while margin creates an invisible margin outside the border of an element. For more on margin and padding, look to the w3 schools for more information.
Here is the JSFiddle for the working code: http://jsfiddle.net/sjAcV/
Here is the JSFiddle for your original code: http://jsfiddle.net/VVZrg/