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
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 want to zoom image with only CSS. The code below zooms the image when the left button of the mouse is kept pressed but I want to zoom in and out with a mouse click. How can I achieve that?
.container img {
transition: transform 0.25s ease;
cursor: zoom-in;
}
.container img:active {
-webkit-transform: scale(2);
transform: scale(2);
cursor: zoom-out;
}
Let's use a trick here, an input checkbox:
input[type=checkbox] {
display: none;
}
.container img {
margin: 100px;
transition: transform 0.25s ease;
cursor: zoom-in;
}
input[type=checkbox]:checked ~ label > img {
transform: scale(2);
cursor: zoom-out;
}
<div class="container">
<input type="checkbox" id="zoomCheck">
<label for="zoomCheck">
<img src="https://via.placeholder.com/200">
</label>
</div>
Building on #Nhan answer: https://stackoverflow.com/a/39859268/661872
Shorter, scoped and does not require tracking ids for multiple elements.
.click-zoom input[type=checkbox] {
display: none
}
.click-zoom img {
margin: 100px;
transition: transform 0.25s ease;
cursor: zoom-in
}
.click-zoom input[type=checkbox]:checked~img {
transform: scale(2);
cursor: zoom-out
}
<div class="click-zoom">
<label>
<input type="checkbox">
<img src="https://via.placeholder.com/200">
</label>
</div>
<div class="click-zoom">
<label>
<input type="checkbox">
<img src="https://via.placeholder.com/200">
</label>
</div>
4 Ways to Add Click Events with Only CSS Pseudo-Selectors
Note: I'll be using the word target when referring to the element we want to manipulate and trigger as the element we are using to manipulate target.
:checked
Use checkboxes or radios and :checked to determine or cause a target's state and/or to take action.
Trigger
<label>
<input type="checkbox">
<!--or-->
<input type="radio">
Conditions
Requires that the target must be:
A sibling that follows the trigger or...
...a descendant of the trigger.
Note
Hide the actual <checkbox> with display:none
Ensure that the <checkbox> has an id and that the <label> has a for attribute with a value matching the id of the <checkbox>
This is dependant upon the target being a sibling that follows the trigger or the target as a descendant. Therefore be aware that you'll most likely use these selector combinators: ~, +, >.
HTML
<label for='chx'>CHX</label>
<input id='chx' type="checkbox">
<div>TARGET</div>
CSS
#chx:checked + div {...
:target
Use an <a>nchor and apply the :target pseudo-selector on the target element.
Trigger
Conditions
Assign an id to the target.
Assign that same id to the <a> href attribute preceding with a hash #
HTML
<a href='#target'>A</a>
<div id='target'>TARGET</div>
CSS
#target:target {...
:focus
The trigger element must be either an <input> type or have the attribute tabindex in order to use :focus.
Trigger
<div tabindex='0'>ANY INPUT OR USE TABINDEX</div>
Conditions
Target must a sibling that is located after the trigger or *target must be a descendant of the trigger.
State or effect will persist until user clicks elsewhere thereafter a blur or unfocus event will occur.
HTML
<nav tabindex='0'>
<a href='#/'>TARGET</a>
<a href='#/'>TARGET</a>
<a href='#/'>TARGET</a>
</nav>
CSS
nav:focus ~ a {...
:active
This is a hack that cleverly exploits the transition-delay property in order to actually have a persistent state achieved with no script.
Trigger
<a href='#/'>A</a>
Conditions
Target must a sibling that is located after the trigger or *target must be a descendant of the trigger.
There must be a transition assigned to the target twice.
The first one to represent the persistent state.
The second one to represent the normal state.
HTML
A
<div class='target'>TARGET</div>
CSS
.target {
opacity: 1;
transition: all 0s 9999999s;
}
a:active ~ .target {
opacity: 0;
transition: all 0s;
}
Wacked looking, right? I'll try to explain it, but you're better off reading this article.
Under normal circumstances, if your trigger had the :active pseudo-selector, we are able to manipulate the target upon keydown. That means our active state is actually active as long as you keep your finger on the button...that's crappy and useless, I mean what are you expected to do to make .active to be useful? Maybe a paperweight and some rubber bands to keep a steady and persistent pressure on the button?
We will leave .active the way it is: lame and useless. Instead:
Make a ruleset for target under normal circumstances. In the example above it's opacity:1.
Next we add a transition: ...ok then... all which works, next is 0s ...ok so this transition isn't going to be seen it's duration is 0 seconds, and finally... 9999999s ...116 days delay?
We'll come back to that, we will continue onto the next rulesets...
These rulesets declare what happens to target under the influence of trigger:active. As you can see that it just does what it normally does, which is onkeydown target will become invisible in 0 seconds. Now once the user keys up, target is visible again...no *target's * new state of opacity:0 is persistent! No paperweight, technology has come a long way.
The target is still actually going to revert back to it's normal state, because :active is too lazy and feeble to work without rubber bands and paperweights. The persistent state is perceived and not real because target is still leaving the state brought on by :active which will be about 116 days before that will happen. ;)
This Snippet features the 4 ways previously mentioned. I'm aware that the OP requested zoom (which is featured therein), but thought it would be to repetitive and boring, so I added different effects as well as zooming.
SNIPPET
a {
text-decoration: none;
padding: 5px 10px;
border:1px solid red;
margin: 10px 0;
display: inline-block;
}
label {
cursor: pointer;
padding: 5px 10px;
border: 1px solid blue;
margin: 10px 0;
display:inline-block;
}
button {
cursor:pointer;
padding: 5px 10px;
border: grey;
font:inherit;
display:inline-block;
}
img#img {
width: 384px;
height: 384px;
display: block;
object-fit: contain;
margin: 10px auto;
transition: width 3s height 3s ease-in;
opacity: 1;
transition: opacity 1s 99999999s;
}
#zoomIn,
#zoomOut,
#spin {
display: none;
padding: 0 5px;
}
#zoomOut:checked + img#img {
width: 128px;
height: 128px;
transition: all 3s ease-out;
}
#zoomIn:checked + img#img {
width: 512px;
height: 512px;
transition: all 3s ease-in-out;
}
#spin:checked ~ img#img {
transform: rotate(1440deg);
}
img#img:target {
box-shadow: 0px 8px 6px 3px rgba(50, 50, 50, 0.75);
}
a.out:focus ~ img#img {
opacity: 0;
transition: opacity 1s;
}
a.in:active ~ img#img {
opacity: 1;
transition: opacity 1s;
}
.grey:focus ~ img#img {
filter: grayscale(100%);
}
<a href='#/' class='out'>FadeouT</a><a href='#/' class='in'>FadeiN</a>
<a href='#img'>ShadoW</a>
<br/><button class='grey' tabindex='0'>GreyscalE</button><br/>
<label for='spin'>SpiN</label>
<input type='checkbox' id='spin'>
<label for='zoomIn'>ZoomiN</label>
<input type='radio' id='zoomIn' name='zoom'>
<label for='zoomOut'>ZoomouT</label>
<input type='radio' id='zoomOut' name='zoom'>
<img id='img' src='https://i.ibb.co/5LPXSfn/Lenna-test-image.png'>
.container img {
margin: 100px;
transition: transform 0.25s ease;
cursor: zoom-in;
}
input[type=checkbox]:checked ~ label > img {
transform: scale(2);
cursor: zoom-out;
}
<div class="container">
<input type="checkbox" id="zoomCheck">
<label for="zoomCheck">
<img src="https://via.placeholder.com/200">
</label>
</div>
<html>
<head>
<title>Image Zoom</title>
<style type="text/css">
#imagediv {
margin:0 auto;
height:400px;
width:400px;
overflow:hidden;
}
img {
position: relative;
left: 50%;
top: 50%;
}
</style>
</head>
<body>
<input type="button" value ="-" onclick="zoom(0.9)"/>
<input type="button" value ="+" onclick="zoom(1.1)"/>
<div id="imagediv">
<img id="pic" src=""/>
</div>
<script type="text/javascript" language="javascript">
window.onload = function(){zoom(1)}
function zoom(zm) {
img=document.getElementById("pic")
wid=img.width
ht=img.height
img.style.width=(wid*zm)+"px"
img.style.height=(ht*zm)+"px"
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
</script>
</body>
</html>
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'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/
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.