Right now I have six floated divs, each with an image as a background. There is a 4.5px margin on each div so it looks like there is a border.
I want to make it so that on hover, the div's "border" is traced/filled up in a different color. How do I do that?
<div id="one" >
</div>
<div id="two" >
</div>
<div id="three" >
</div>
<div id="four" >
</div>
<div id="five" >
</div>
<div id="six" >
</div>
Here's the css:
#one,#two,#three,#four,#five,#six{
max-height:400px;
background-color: grey;
margin:4.5px;
height:60vh;
width:417px;
max-width:417px;
float:left;
background-size: cover;
opacity:.9;
text-align:center;
}
#one{
background-image:url('../images/1.jpg');
}
#two{
background-image:url('../images/2.jpg');
}
#three{
background-image:url('../images/3.jpg');
}
#four{
background-image:url('../images/4.jpg');
}
#five{
background-image:url('../images/5.jpg');
}
#six{
background-image:url('../images/6.jpg');
}
#one:hover,#two:hover,#three:hover,#four:hover,#five:hover,#six:hover{
opacity:1;
box-shadow: 0 0 0 8px white;
}
One approach is to use an svg element instead of a div to animate the border (stroke) using stroke-dashoffset and stroke-dasharray.
http://jsfiddle.net/zLuercaa/
Make
margin:0;
and then add a real border to each div
border: 4px solid blue;
and then on :hover you can change the border color.
Simply add transition-duration: 0.4s; or whatever time you want to your divelements.
body {
background-color: black;
}
#one,
#two,
#three,
#four,
#five,
#six {
background-image: url('http://lorempixel.com/400/300');
max-height: 400px;
background-color: grey;
margin: 4.5px;
height: 60vh;
width: 417px;
max-width: 417px;
float: left;
background-size: cover;
opacity: .9;
text-align: center;
transition-duration: 0.4s;
}
#one:hover,
#two:hover,
#three:hover,
#four:hover,
#five:hover,
#six:hover {
opacity: 1;
box-shadow: 0 0 0 8px white;
}
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
Related
i have a button that expands a section with background image to show hidden text, but how do i make it so that i can just press the button once instead of haviing to hover it or hold down? and then press it again to return to its default state
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>TITLE</title>
</head>
<body>
<div class="mainPic">
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<label class="bottom-arrow" for="trigger"></label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
</div>
</body>
</html>
#charset "utf-8";
body{
background-color: white;
}
.mainPic{
background-image: url("images/background.webp");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 200;
padding:0;
margin:0;
font-size: 75px;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}
.bottom-arrow{
content:'';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
cursor: pointer;
}
/*Custom CSS*/
section{position:relative;}
#hidden-content #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
#hidden-content:active #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
#hidden-content:active .bottom-arrow{
position:absolute;
bottom:-25px;
transition: 0.25s ease-out;
}
........................................................................
I have never found a CSS-only solution regarding something like this, so using a splash of Javascript will help to toggle a different state using a class on your hidden-content container. Then, using the presence of the new class, you can edit the appearance of your HTML elements.
In other words, adding and removing a class can allow you to update it's appearance.
var trigger = document.querySelector('.bottom-arrow');
trigger.addEventListener('click', function(){
document.getElementById('hidden-content').classList.toggle('active');
});
body{
background-color: white;
}
.mainPic{
background-image: url("images/background.webp");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 200;
padding:0;
margin:0;
font-size: 75px;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}
.bottom-arrow{
content:'';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
cursor: pointer;
}
/*Custom CSS*/
section{position:relative;}
#hidden-content #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
#hidden-content.active #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
#hidden-content.active .bottom-arrow{
position:absolute;
bottom:-25px;
transition: 0.25s ease-out;
}
<div class="mainPic">
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<label class="bottom-arrow" for="trigger"></label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
</div>
Technically speaking you don't have a button. HTML standard includes a button element which is what people think of when speaking of buttons in web pages / web apps.
You want to toggle the hidden attribute based on the click event of an element.
var label = document.querySelector("label");
label.addEventListener("click", function () {
document.getElementById("list").toggleAttribute("hidden");
});
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<label class="bottom-arrow" for="trigger">CLICK ME</label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
Using a checkbox with the label allows you to use its state.
body {
background-color: white;
}
.mainPic {
background-image: url("images/background.webp");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
}
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 200;
padding: 0;
margin: 0;
font-size: 75px;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}
.bottom-arrow {
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
cursor: pointer;
}
/*Custom CSS*/
section {
position: relative;
}
#hidden-content #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
#trigger {
display: none;
}
#trigger:checked + label + #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
#trigger:checked + label.bottom-arrow {
position: absolute;
bottom: -25px;
transition: 0.25s ease-out;
}
<div class="mainPic">
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<input type="checkbox" id="trigger">
<label class="bottom-arrow" for="trigger"></label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
</div>
I have a makeshift table of items that are rounded and equal borders by removing the bottom border from every container that ins't the first or the last.
What I'm trying to achieve, is when I hover, I'd like to have the entire "container" have a white border but it's not really possible at the moment because of the zero border. Does anyone have any suggestions? I'm assuming I have to do this with javascript.
Here is what I have so far (jsfiddle)
HTML
<div id="container">
<div class="item-container">
1
</div>
<div class="item-container">
2
</div>
<div class="item-container">
3
</div>
<div class="item-container">
4
</div>
<div class="item-container">
5
</div>
</div>
CSS
body {
background-color:#000;
}
#container { width:500px;}
.item-container { border:3px solid #7F7F7F;color:#7F7F7F;padding:10px;width:100%;border-bottom:0 }
.item-container:not(:first-child) { border-bottom:0; }
.item-container:hover { border:3px solid #fff;cursor:pointer;color:#fff; }
.item-container:first-child { border-top-right-radius:3px;border-top-left-radius:3px; }
.item-container:last-child { border-bottom:3px solid #7F7F7F;border-bottom-right-radius:3px;border-bottom-left-radius:3px; }
You may create the border differently:
body {
background-color: #000;
}
#container {
width: 500px;
color: #7F7F7F;
border-radius: 3px;
border-bottom: 3px solid;
}
.item-container {
border: 3px solid #7F7F7F;
border-bottom: 0;
padding: 10px;
position: relative;
}
.item-container:after {
content: "";
position: absolute;
bottom: -3px;
right: -3px;
left: -3px;
height: 3px;
background-color: #7F7F7F;
}
#container .item-container:hover {
border-color: #fff;
z-index: 2;
transition: 1s;
}
#container .item-container:hover::after {
background-color: #fff;
z-index: 2;
transition: 1s;
}
<div id="container">
<div class="item-container">
1
</div>
<div class="item-container">
2
</div>
<div class="item-container">
3
</div>
<div class="item-container">
4
</div>
<div class="item-container">
5
</div>
</div>
I'm trying to delay each by instant then 300, then 600, then 900 etc
i want each element to slide in one after the other separated by 0.3s.
Here is the code:
HTML:
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
<div class="fourth">
</div>
<div class="fifth">
</div>
CSS:
* {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.first,
.second,
.third,
.fourth,
.fifth {
width: 960px;
padding:10px;
margin: 20px auto;
min-height: 50px;
background: white;
box-shadow: 0 2px 8px 2px rgba(0,0,0,0.15);
transform: translateX(-150%);
transition: 0.5s ease;
background:orange;
.trans {
transform: translate(0);
transition:0.5s ease;
}
}
jQuery:
$(document).ready(function(){
$(".first").toggleClass("trans");
}).delay(300).queue(function(){
$(".second").toggleClass("trans");
}).delay(600).queue(function(){
$(".third").toggleClass("trans");
});
* {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.first,
.second,
.third,
.fourth,
.fifth {
width: 960px;
height:50px;
padding:10px;
margin: 20px auto;
min-height: 50px;
background: white;
box-shadow: 0 2px 8px 2px rgba(0,0,0,0.15);
transform: translateX(-150%);
transition: 0.5s ease;
background:orange;
}
.trans {
transform: translate(0);
transition:0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
<div class="fourth">
</div>
<div class="fifth">
</div>
I understand there is something called dequeuing? Although I do not know how to implement this into the code at all.
I tried adding .dequeue() before each .delay() but it didn't do anything, the elements third, fourth and fifth still weren't showing :(
Send help, please!
Here is the code pen: http://codepen.io/anon/pen/vyawXm
I've added a snippet too.
I've only put jQuery in for the third class, but that doesn't even show, and neither does fourth and fifth when they're added.
you need to add this line: $(this).dequeue();
in every queue callback function, after you call toggleClass function.
Hello kind internet beings, I have a question I hope you can assist with. I have a container like so:
And the inner divs float left so that they are side-by-side in rows. The problem is that when there is an inner div that is taller then the others, the next row is all weird and there is a lot of extra space.
I'd prefer it to look like:
Each inner div (in the picture it is not to scale) has the same width but might have a different height. Is there some css option to set each row to line up under the tallest item of the previous row, perhaps?
<style>
.objectContainer
{ background-color: #e1e8fa;
border-radius: 5px;
padding:4px;
width: 280px;
float: left;
margin: 7px;
-moz-box-shadow: 0 0 3px #000000;
-webkit-box-shadow: 0 0 3px #000000;
box-shadow: 0 0 3px #000000;
display:inline-block;
position:relative;
vertical-align:top;
}
.innerContainer
{ padding: 4px;
margin: 4px;
min-height: 95px;
max-height: 140px;
outline: 1px dashed #5c5c5c;
background-color: white;
}
.tab {
padding-left: 15px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
height: 18px;
width: 150px;
border-top: 1px dashed;
border-left: 1px dashed;
border-right: 1px dashed;
border-color: #5c5c5c;
border-radius: 10px 10px 0px 0px;
position: relative;
}
</style>
<div id="mainContainer" class="main_container" >
<div class="main" style="padding-bottom: 20px;">
<div class="listviewheader">
<div style="clear:both;" class="objectContainer" id="container_2483" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #e3c785 , white); background: -o-linear-gradient(right, #e3c785, white); background: -moz-linear-gradient(right, #e3c785, white); background: linear-gradient(to right, #e3c785 , white);">x</div>
<input type="hidden" name="note_2483" id="note_2483" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2483" style="clear: both; background-color: #fdfce2; " class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2484" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #c1e194 , white); background: -o-linear-gradient(right, #c1e194, white); background: -moz-linear-gradient(right, #c1e194, white); background: linear-gradient(to right, #c1e194 , white);">x</div>
<input type="hidden" name="note_2484" id="note_2484" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2484" style="clear: both; background-color: #fdfce2; " class="innerContainer" name="innerContainer">
</br></br></br></br></br></br>
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2496" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #e3c785 , white); background: -o-linear-gradient(right, #e3c785, white); background: -moz-linear-gradient(right, #e3c785, white); background: linear-gradient(to right, #e3c785 , white);">x</div>
<input type="hidden" name="note_2496" id="note_2496" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2496" style="clear: both;" class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2495" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #e3c785 , white); background: -o-linear-gradient(right, #e3c785, white); background: -moz-linear-gradient(right, #e3c785, white); background: linear-gradient(to right, #e3c785 , white);">x</div>
<input type="hidden" name="note_2495" id="note_2495" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2495" style="clear: both;" class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2481" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #e3c785 , white); background: -o-linear-gradient(right, #e3c785, white); background: -moz-linear-gradient(right, #e3c785, white); background: linear-gradient(to right, #e3c785 , white);">x</div>
<input type="hidden" name="note_2481" id="note_2481" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2481" style="clear: both; background-color: #fdfce2; " class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2482" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #c1e194 , white); background: -o-linear-gradient(right, #c1e194, white); background: -moz-linear-gradient(right, #c1e194, white); background: linear-gradient(to right, #c1e194 , white);">x</div>
<input type="hidden" name="note_2482" id="note_2482" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2482" style="clear: both; background-color: #fdfce2; " class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
</div>
<div style='clear:both;'>
</div>
</div>
set the css for your inner divs to display:inline-block; position:relative and most importantly, vertical-align:top;
that should do it!
You can use bootstrap to separate divs by their rows.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-4" id="box1">box 1</div>
<div class="col-md-4" id="box2">box 2</div>
<div class="col-md-4" id="box3">box 3</div>
</div>
<div class="row">
<div class="col-md-4" id="box4">box 4</div>
<div class="col-md-4" id="box5">box 5</div>
<div class="col-md-4" id="box6">box 6</div>
</div>
</body>
</html>
It looks something like this with the height and background color changed.
Use a grid system. Either bootstrap or zurb foundation will work fine. If you decide to do it on your own I can tell you the most important trick is to use the "after" pseudo selector to clear the float. The following gives you the basic grid design. The box sizing is only necessary to avoid trouble with optional paddings in the columns.
Then CSS with
.row:after{
content: "";
clear: both;
display: block;
height: 0;
width: 0;
overflow: hidden;
}
.col-33{
width: 33.33%;
float: left;
box-sizing: border-box;
}
<div class="row">
<div class="col-33">
First col
</div>
<div class="col-33">
Second col
</div>
<div class="col-33">
Third col
</div>
</div>
<div class="row">
<div class="col-33">
First col
</div>
<div class="col-33">
Second col
</div>
<div class="col-33">
Third col
</div>
</div>
I want to place 12 cards (2 rows -> 6 cards in one row). My code needs to be responsive so I used width/height %. Problem is that there is a lot of whitespace/empty space and cards are tiny. Here is code that I used:
JSFIDDLE: http://jsfiddle.net/A2bU7/
CSS:
#pagewrap
{
display:flex;
display: -webkit-flex;
display: -moz-flex;
width:100%;
}
#board{
//padding: 5px;
background-color:#cccccc;
width:100%;
height:70%;
}
#board > div {
background-color: grey;
border:#000 1px solid;
width:10%;
height:20%;
float:left;
margin:15px;
padding:15px;
font-size:64px;
cursor:pointer;
box-shadow: 0px 5px 14px grey;
border-radius: 5px;
transition: 0.2s;
}
#board > div:nth-child(6n+1) {
clear: both;
}
#board > div:hover {
box-shadow: 0px 0px 25px black;
transition-timing-function: all ease-in-out;
}
HTML:
<html>
<div id="pagewrap">
<div id="board">
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
</div>
<div>
</html>
Margin stretches the outside of your div that's why you getting whitespace/empty space and padding stretches on the inside. So you should tune in/out your margin/padding of your card and choose what you like.
#board > div {
margin: 5px;
padding: 25px 20px;
}
fiddle with margin/padding change.
fiddle with percentile width/height.
Reduce your margin and maybe increase your padding.