<!DOCTYPE html>
<html>
<head>
<style>
html,body{
height:100%;
width:100%;
margin:0%;
Padding:0%;
}
.wrap{
height:100%;
width:100%;
position:relative;
overflow:hidden;
background:#120103;
color:#fff;
text-align:center;
}
header{
background:#3E474F;
box-shadow:0 .5em 1em #111;
position:absolute;
z-index:900;
width:100%;
}
header label{
color:#788188;
cursor:pointer;
display:inline-block;
line-height:4.25em;
font-size:.667em;
font-weight:bold;
padding:0 1em;
}
header label:hover{
background:#2e353b;
}
.slide{
width:100%;
height:100%;
position:absolute;
top:0%;
left:100%;
z-index:10;
padding:8em 1em 0;
background-color:#120103;
background-position:50% 50%;
background-size:cover;
transition:left 0s .75s;
}
[id^= "slide"]:checked + .slide{
left:0;
z-index:100;
transition:left .65s ease-out;
}
img{
height:250px;
width:250px;
Margin:20px;
Overflow:none;
display:block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.slide-one:hover .overlay{
opacity:0.5;
}
.slide-two:hover .overlay{
opacity:0.5;
}
.slide-three:hover .overlay{
opacity:0.5;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slide-one{
background-image:url('wow.jpg');
}
.slide-two{
background-image:url('Anonymous.jpg ');
}
.slide-three{
background-image:url('1.jpg');
}
</style>
</head>
<body>
<div class="wrap">
<header>
<label for="slide-1-trigger">Slide One</label>
<label for="slide-2-trigger">Slide Two</label>
<label for="slide-3-trigger">Slide Three</label>
</header>
<input id="slide-1-trigger" type="radio" name="slide" checked>
<section class="slide slide-one">
<div class="overlay">
<div class="text">Ethical Hacking is licensed hacking.... Read More
</div>
</div>
</section>
<input id="slide-2-trigger" type="radio" name="slide" >
<section class="slide slide-two" >
<div class='overlay'>
<div class="text">A rather famous group of hackers and tech savvys spread
across the world....Read More</div>
</div>
</section>
<input id="slide-3-trigger" type="radio" name="slide" >
<section class="slide slide-three" >
<div class='overlay'>
<div class="text">Just Checking</div>
</div>
</div>
</body>
</html>
Hello everybody , i was watching a video on making a CSS image slider after watching the whole video i wrote the above code but am having some problem understanding this particular piece of code:
[id^= "slide"]:checked + .slide{
left:0;
z-index:100;
transition:left .65s ease-out;
}
I need help understanding this part of the code. Thank you for help in advance :)
First off it seems you understand the fundamental principles of CSS but if I am wrong and you do not, I recommend the tutorials of MDN about How CSS works and the Syntax.
So piece by piece...
1. [id^= "slide"]:checked + .slide
This is the selector and consists of two major parts: [id^= "slide"]:checked and .slide, connected by a + sign. I assume that you know what .slide means on its own. If not, you should read the articles that I posted above.
1.1. +
The + operator with the x + y syntax selects all elements that would be selected by pure y but it limits the selection to only those elements directly following other elements which would be selected by x. So if you have .a + .b then you get all elements with the class b directly preceded by elements with the class a:
div {
border: 1px dashed black;
padding: 1em;
margin: 1em;
}
.wupwupwup + .nanana {
background: red;
}
This selects all .nanana directly after .wupwupwup.
<div class="nanana wupwupwup">This is not selected because there is no .wupwupwup before.</div>
<div class="wupwupwup">This is not selected because it has no .nanana class</div>
<div class="nanana">This is selected because it has .wupwupwup before and itself matches .nanana</div>
<div>This is not selected because it does not match .nanana and also because the previous element does not match .wupwupwup</div>
1.2. [id^="slide"]:checked
This one again consists of two selectors: [id^="slide"] and :checked. :checked is explained very simply: x:checked selects all elements that match x as long as they are "checked". An element is "checked" for example if it is a checkbox or radio button and is checked. So we now need to examine the x in this case [id^="slide"]. That is a selector which selects all elements which have an attribute id which starts with slide. So it would select all elements with ids like slide, slide-1-trigger, slide-2-trigger, slider, and so on.
So what the whole [id^= "slide"]:checked + .slide does can be explained like this: It selects all elements with the class slide that directly follow a "checked" element with an ID that begins with slide.
In your case ...
... this means, that for example the element <section class="slide slide-one"> after a checked <input id="slide-1-trigger" type="radio" name="slide" checked> will be selected.
2. The rules
{
left:0;
z-index:100;
transition:left .65s ease-out;
}
First off: You can read about transitions on MDN.
What your transition basically does is: Make the change of the property left to the value 0 smooth for 0.65 seconds. While it does this, it subtly uses a special easing function called ease-out but you can omit that probably without noticeable differences. The z-index of 100 makes this current slide the top-most so that it is not hidden behind the other slides.
Another thing ...
... that you may have missed: The <label ...> elements that you use will mark the corresponding <input ...> elements as checked if you click on the labels. That is why their state changes and then the :checked selector takes effect.
:checked is a CSS pseudo-class selector that represents any radio, checkbox or option that has been checked/clicked. That segment of CSS is just targeting any id of slide-trigger and performing a transition left when the :checked pseudo-class is active. I hope that was helpful
Related
I am trying to automatically adjust the length of the hr element to the length of the input element using CSS.
Also an animation that is executed when the focus is on the input.
I saw this solution on stackoverflow for the h2 element: How to do it with h2 element
Code:
h2{
font-size:50px;
padding:0 25%;
text-align:center;
}
h2 hr{ width:100%;height:10px;background:#000;}
<h2>
This is a very big title
<hr />
</h2>
I have tried it with the input element, but it does not work.
My Code:
hr.underline {width: 0%;}
input.input:focus hr.underline{
left:0;
width:100%;
height:2px;
background-color:#17e13f;
border:none;
margin-top:5px;
margin-left:0;
margin-bottom:0px;
}
<div>
<label for="1">Eingabe</label>
<input class="input" type="text" id="1">
<hr class="underline">
</input>
</div>
But this wont work.
Does anyone know how, or is there a better way to do that?
you are closing your input tag which is wrong input tag is self closing...
what if did:using max-content on the parent divthen giving width:100% to .underline on focus which means 100% of the parent. and transition: width 0.25s ease-in-out; for smooth animation.
div{
display:flex;
gap:5px;
}
span {
display:inline-block;
width: max-content;
}
.input:focus~.underline {
width: 100%;
}
.underline {
height: 2px;
border: none;
background-color: #17e13f;
width: 0%;
transition: width 0.25s ease-in-out;
}
<div>
<label for="1">Eingabe</label>
<span>
<input class="input" type="text" id="1">
<hr class="underline">
</span>
</div>
I want to have a box (Card1) with a button in it (Button is in Card1) (see the code example) and change the size of the Card 2 and card 1 (make card 2 bigger and card 1 smaller).
But the trick is that I can’t use JavaScript. First of all, is it possible or not? And if it is, how?
#card1{
width: 50%;
background-color: red;
}
#card2{
width: 50%;
margin-top: 1%;
background-color: green;
height: 10%;
}
#button{
background-color: yellow;
}
<div id="card1">
I am card 1
<div id="button">
Click me and make card 2 bigger and card 1 smaller
</div>
</div>
<div id="card2">
I am card2
<div>
You can achieve that by creating hidden checkbox, then when it's checked select any needed element that follows it (do not make it in inner DOM or after elements, as CSS can only select "future" nodes going from root)
Here I use checkbox state :checked and select all following elements with ~
#card1{
width:50%;
background-color:red;
transition: width 300ms ease-in-out;
}
#card2{
width:50%;
margin-top:1%;
background-color:green;
height:10%;
transition: width 300ms ease-in-out;
}
#button{
background-color:yellow;
}
#hidden-checkbox:checked ~ #card1 {
width: 25%;
}
#hidden-checkbox:checked ~ #card2 {
width: 75%;
}
<input type="checkbox" id="hidden-checkbox"/>
<div id="card1">
I am card 1
<label for="hidden-checkbox" id="button">
Click me and make card 2 bigger and card 1 smaller
</label>
</div>
<div id="card2">
I am card2
<div>
You can use Input type checkbox and inside the label, you can use card1 div, and using CSS checked selector (:checked) you can check the box and set the new width of the div2.
Hello i have been trying a lot to do the pop-up image effect using CSS and CSS3 but the result is nothing i don't know what is the problem, i think it's because of the pseudo-classes don't work with me like (visited,actived and focus etc..) just hover works with me so could anybody help me solve this problem?
what i mean by pop-up image effect is : you know when clicking on an image on Facebook that image is popped up with it's real size and the background is become a little bit more dark?
By the way does anyone know what is the problem with the pseudo-classes why they don't work with me?
thanks
<style type="text/css">
.pop{
border: 1px solid #000 ;
border-radius: 15%;
width: 200px;
height: 200px;
}
.pop:active{
width:500px ;
height:500px;
position:relative;
right: -65px;
top: 200px ;
background-color:#000;
}
<img class='pop' src="C:/Users/mohammad ghazi/Desktop/Xhtml folder/friends.jpg" alt="" />
What you are looking for is called a lightbox. Their are many good tutorials on how to make a pure css one, here is a few of them:
http://andornagy.com/pure-css-image-lightbox/
http://www.designcouch.com/home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/
http://www.thecssninja.com/xhtml/futurebox
The problem with using :target as a CSS click event is that it has some downsides such as page jumps or browser history.
You can avoid the downsides of :target by using the checkbox hack:
Make a checkbox and hide it:
<input type="checkbox" id="check" style="display:none;">
Then, make the image you want to have a lightbox for, and wrap it in a <label>
<label for="check">
<img src="http://lorempixel.com/400/400/" width="200">
</label>
Now, write the HTML for the lightbox:
<label for="check">
<div id="cover">
<div id="box">
<img src="http://lorempixel.com/400/400/" width="400">
</div>
</div>
</label>
And now, for the CSS magic!
Create the lightbox css:
#cover{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.5);
display:none;
}
#box{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width:400px;
height:400px;
border:10px solid white;
}
This creates and centers the lightbox.
Now you need to add the click event:
#check:checked ~ label #cover{
display:block;
}
This CSS means, If #check is checked (:checked selector), find the sibling (~) with a id of #cover inside a label element and apply the rule to it.
That's it!
Your coding should look like this:
<input type="checkbox" id="check" style="display:none;">
<label for="check">
<img src="http://lorempixel.com/400/400/" width="200">
</label>
<label for="check">
<div id="cover">
<div id="box">
<img src="http://lorempixel.com/400/400/" width="400">
</div>
</div>
</label>
And CSS:
#check:checked ~ label #cover{
display:block;
}
#cover{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.5);
display:none;
}
#box{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width:400px;
height:400px;
border:10px solid white;
}
SEE THIS JSFIDDLE
I think what you're going for is definitely javascript or Jquery. here is a JSFiddle which shows what i'm on about.
HTML:
<img src="http://0.s3.envato.com/files/19320511/Scenery%2080x80%20Avatar.png"/>
<div id="divLargerImage"></div>
<div id="divOverlay"></div>
JQuery:
$('a img').click(function () {
var $img = $(this);
$('#divLargerImage').html($img.clone().height(250).width(250)).add($('#divOverlay')).fadeIn();
});
$('#divLargerImage').add($('#divOverlay')).click(function () {
$('#divLargerImage').add($('#divOverlay')).fadeOut(function () {
$('#divLargerImage').empty();
});
});
CSS:
#divLargerImage
{
display: none;
width: 250px;
height: 250px;
position: absolute;
top: 35%;
left: 35%;
z-index: 99;
}
#divOverlay
{
display: none;
position: absolute;
top: 0;
left: 0;
background-color: #CCC;
opacity: 0.5;
width: 100%;
height: 100%;
z-index: 98;
}
There are many ways to do this, but most easy way to do this is you can use lighbox tools like: FancyBox, Colorbox plugins etc.
Fancy Box: http://fancybox.net
Color Box: http://www.jacklmoore.com/colorbox/
Alternatively you can use: jQuery Lightbox Generator
jQuery Lightbox Generator: http://visuallightbox.com/
For the problem with pseudo-classes, what i got from your question is you want to enlarge image?
Check this Jsfiddle:
` http://jsfiddle.net/23zgvg1f/1/ `
I hope this helps :)
When you click a link, a:active style of the clicked link is being applied. So when I've got a link which gets called and activated from the url using its name like whats shown below, why doesn't my code work?
.box{
display:block;
width:100px;
height:100px;
background:gray;
margin:20px 0px;
}
a{
-moz-transition:all 1s ease;
-webkit-transition:all 1s ease;
}
a:active{
background:orange;
}
<body>
user
<a class="box" name="user">userbox</a>
</body>
I want it to call a:active css for userbox when userbox is called from the url.
Is my code invalid or not an option for these kind of situations?
I think the pseudo-class you want is :focus. :active is applied while a link is being clicked.
-EDIT-
Of the browsers I tested, only Internet Explorer 11 focused the anchor when the URL was updated to include #user. You can use JavaScript to set a class as follows:
window.addEventListener('hashchange', function () {
var activeElement = document.getElementById(window.location.hash.substring(1));
if (activeElement) {
activeElement.className = 'active';
}
});
This would require using the following CSS:
.active {
color: orange;
}
And this assumes using id="user" instead of name="user" which both behave the same with regard to the URL hash.
I want it to call a:active css for userbox when userbox is called from the url. my code is invalid or it's not an option for this kinda situations?
You can't. :active means "While being clicked on or otherwise activated". It does not mean "Having an href attribute that resolves to the current URI".
Use some other mechanism, such as adding a class to the element in the HTML.
We can hack it, we have the technology.
In all seriousness you should use classes and Javascript for this solution, but I put a bit too much of my lunch time into this to just throw it away.
http://jsfiddle.net/DF4VG/
CSS:
#label {
display: block;
}
#label:hover {
cursor: pointer;
text-decoration: underline;
}
#container {
position: relative;
}
#wrapper {
z-index: 2;
position: relative;
}
#user {
border: none;
background: transparent;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
z-index: 1;
transition: all 1s ease;
}
#user:focus {
background: orange;
}
HTML:
<form action="">
<label id="label" for="user">User</label>
<div id="container">
<div id="wrapper">
<p>There is some content in here</p>
<p>And some more</p>
<p>And so forth</p>
</div>
<input type="text" id="user" value="" readonly>
</div>
</form>
I would like to do a CSS effect on hovering an image.
I'd like to show a div containing content like text when I hover on an image.
So I'd like to do something with this code:
<div id="image"><img src="image.png"/></div>
<div id="hover">Test message</div>
I have tried to hide the "hover" div in css display and on hover I tried to set the display to block, but its not working...:(
EDIT: I want the text on the image. When I hover the image it should get some opacity BUT the text should not recieve that opacity!
IS there any method to do this?
http://jsfiddle.net/ZSZQK/
#hover {
display: none;
}
#image:hover + #hover {
display: block;
}
Just keep it simple, no need to change your markup.
Update
If you want to change opacity of image on mouse hover, then
http://jsfiddle.net/ZSZQK/4/
#hover {
display: none;
position: relative;
top: -25px;
}
#image:hover {
opacity: .7;
}
#image:hover + #hover {
display: block;
}
Update 2
Since you added a couple of more requirements to your initial question, now it requires a change in the original html markup.
I am assuming you are using html5, and if so, you should use the tags appropriated for your content's context:
<figure>
<img src="http://placekitten.com/200/100" />
<figcaption>Test message</figcaption>
</figure>
and the css
figure {
position: relative;
display: inline-block;
}
figcaption {
display: none;
position: absolute;
left: 0;
bottom: 5px;
right: 0;
background-color: rgba(0,0,0,.15);
}
figure:hover img {
opacity: .7;
}
figure:hover figcaption {
display: block;
}
jsFiddle
Try:
<div id="image">
<img src="image.png"/>
<div class="hover">Test message</div>
</div>
CSS:
#image {
position:relative;
}
#image .hover {
display:none;
position:absolute;
bottom:0;
}
#image:hover .hover {
display:block;
}
Basically what I did was:
Moved text div inside #image div.
Changed id="hover" to class="hover"
Added display:block when #image is hovered and display:none if not.
Some positioning rules, it's just a fast example, let me know if it works.
There are so many ways to do this, but if you want a CSS only approach, you would need to restructure your html to something like:
<div id="image">
<img src="image.png"/>
<div id="hover">Test message</div>
</div>
And then in your CSS hide the message by default:
#hover {display:none;}
Then show the message:
#image:hover #hover {display:block;}
Without JavaScript you can do like this :
1.Make the #hover div be on top of the image and set the opacity:0;
2.Than add this to the css :
#hover:hover {
opacity:1
}
This should resolve your problem.
here is the solution i found on google
<!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=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#mybox {
width:80px;
height:90px;
float:left;
background-color:#0F9;
padding:10px;
}
.Imgdiv {
width:80px;
height:20px;
margin:0px 0px 10px 0px; padding:0px;
cursor:pointer;
background-color:#39C;
}
#mybox .hiddenDiv {
left:0px;
display:none;
z-index:100;
width:80px;
height:50px;
margin:0px;
background-color:#336;
float:left;
}
#mybox:hover .hiddenDiv {
display:block; top:0px; left:8px;
}
</style>
<body>
<div id="mybox">
<div class="Imgdiv"></div>
<div class="hiddenDiv"></div>
</div>
</body>
</html>
Hello If I understand correctly you want something like this:
<div id="wrapper">
<div id="img-wrapper">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSp7bY6nYWTDmFXKSlP4TdCe5ghVQhbt85tQMS8dfZMEGw7QOXiLA">
</div>
<div id="text-wrapper">
<p>Hello world!</p>
</div>
</div>
CSS:
#wrapper{
position:relative;
border:1px solid black;
width:102px;
height:102px;
}
#text-wrapper{
position:absolute;
height:0px;
overflow:hidden;
font-size:14px;
font-family:Arial,Tahoma;
font-weight:bold;
transition: height 1s;
-moz-transition: height 1s; /* Firefox 4 */
-webkit-transition: height 1s; /* Safari and Chrome */
-o-transition: height 1s; /* Opera */
}
#img-wrapper:hover + #text-wrapper{
height:32px;
width:102px;
}
The key to accomplish this is this css line:
#img-wrapper:hover + #text-wrapper{
What it actually does is "When I hover img-wrapper div do some stuff in text-wrapper div"
Check demo here: http://jsfiddle.net/A9pNg/1/