I have a question about CSS. I've coded an animation to rotate on hover. Now when I hover on it, it's glitching really much. It just begins the rotation again and again. Can someone please help. Code is here:
#text {
width: 300px;
height: 150px;
background-color: lightgray;
border-left: 0px groove;
border-top: 0px groove;
border-radius: 10px;
margin: auto;
padding: 5px;
transition: all 0.3s ease-in;
}
#text:hover {
border-left: 10px groove;
border-top: 10px groove;
background-color: lightskyblue;
transform: rotateY(360deg);
}
#text::after {
content: "Hover me";
font-size: 30px;
margin-left: 100px;
color: black;
}
#text:hover::after {
content: "If you want to know how to get started as a web developer, take a look at my youtube channel";
margin: 0;
font-size: 20px;
}
<div id="text">
</div>
As Paulie_D correctly stated, your :hover triggers the animation, but terminates the animation when your mouse leaves the #text element. So it resets.
There are multiple ways to fix this like this example to make a new container element that doesn't move but only triggers the animation.
.text {
width: 100%;
height: 150px;
background-color: lightgray;
border-left: 0px groove;
border-top: 0px groove;
border-radius: 10px;
padding: 5px;
transition: all 0.3s ease-in;
margin-bottom: 20px;
}
.animated-card {
margin: auto;
width: 300px;
}
.animated-card:hover > .text {
transform: rotateY(360deg);
}
.text:hover {
border-left: 10px groove;
border-top: 10px groove;
background-color: lightskyblue;
}
.text::after {
content: "Hover me";
font-size: 30px;
margin-left: 100px;
color: black;
}
.text:hover::after {
content: "If you want to know how to get started as a web developer, take a look at my youtube channel";
margin: 0;
font-size: 20px;
}
<div class="animated-card">
<div id="text"></div>
</div>
<div class="animated-card">
<div class="text"></div>
</div>
<div class="animated-card">
<div class="text"></div>
</div>
<div class="animated-card">
<div class="text"></div>
</div>
Related
This question already has answers here:
HTML Div border not showing
(3 answers)
Closed 2 years ago.
I want to add borders for images and my top-nav and here is my code I have tried
.navtop {
background: #b7f582;
width: 100%;
height: 100px;
overflow: hidden;
}
.navtop a {
width: auto;
min-width: 90px;
text-align: center;
text-decoration: none;
height: 100px;
-webkit-transition: 0.5s;
background: #82a8f5;
float: left;
}
.navtop a:hover {
transition: 0.5s;
transform: translateY(10px);
background: #d96cbc;
color: black;
}
.navtop img {
float: left;
width: 100px;
height: 100px;
border-color: black;
border-width: 5px;
}
<div class="navtop">
<img src="RingLogo.png">
Home
</div>
How can I add a border color to a <div> area and and image? See, I can add a border onto buttons but not anything else.
Use the border in one statement for simplicity because you are missing the border-style:
border: 5px solid black;
You can check for other border-styles and other options via this link.
You haven't specified the border-style, that's why it's not working. Either add border-style: solid or use the shorthand to define all 3 properties (border-width, border-style and border-color) in a single line: border: 5px solid black.
The reason why defining only border-width and border-color is working on <button>s is that browsers apply some default styles, so buttons already have a border-style defined, as shown below:
console.log(window.getComputedStyle(document.getElementById('defaultButton')).borderStyle);
.navtop {
background: #b7f582;
height: 100px;
overflow: hidden;
border: 5px solid green;
}
.navtop a {
width: auto;
min-width: 90px;
text-align: center;
text-decoration: none;
height: 100px;
-webkit-transition: 0.5s;
background: #82a8f5;
float: left;
}
.navtop a:hover {
transition: 0.5s;
transform: translateY(10px);
background: #d96cbc;
color: black;
}
.navtop img {
float: left;
width: 100px;
height: 100px;
border: 5px solid black;
box-sizing: border-box;
}
#styledButton {
border-color: red;
border-width: 5px;
}
<div class="navtop">
<img src="RingLogo.png">
Home
<button id="defaultButton">Foo</button>
<button id="styledButton">Bar</button>
</div>
you can do something like this also close the </div>, div is not self closing element.
.navtop {
background: #b7f582;
width: 100%;
height: 110px;
overflow: hidden;
border:5px solid red;
}
.navtop a {
width: auto;
min-width: 90px;
text-align: center;
text-decoration: none;
height: 100px;
-webkit-transition: 0.5s;
background: #82a8f5;
float: left;
}
.navtop a:hover {
transition: 0.5s;
transform: translateY(10px);
background: #d96cbc;
color: black;
}
.navtop img {
float: left;
width: 100px;
height: 100px;
border: 5px solid blue;
}
<style>
</style>
<div class="navtop">
<img src="http://placekitten.com/301/301">
Home
</div>
I have been trying hard without success to add a little triangle under my square to act as a pointer like this:
My code by itself works, but whenever I try to add css to make this triangle nothing will appear. I think it has to do with before-after functions, but I'm not really getting it. Anyone can help me with that?
<div id="slider_outer1">
<div class="slider_segment"><img src="myurl.com" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"></div>
</div>
<style>
.container {width:400px;}
#slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}
.slider_segment {width: 100%; float: left; display: inline;}
#slider_marker1 {
position: absolute;
border: 2px solid #574fff;
height: 30px;
width: 5%;
top: 120px;
left: 57.25%;
text-align: center;
Margin-left: -10%;
padding: 5px 0px;
background: #ffffff;
border-radius: 5px;
}
div#slider_marker1:after {
content: "5";
font-size: 20px;
padding: 5px;
line-height: 30px;
font-family: sans-serif;
}
</style>
edit: code of the triangle
<div class="triangle-down"></div>
<style>
.triangle-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #555;
}
</style>
Generally in CSS triangles are made using borders, not before and after pseudo elements. To create a downward pointing triangle, you would create a top border of n number of pixels, and left and right borders of half that width and also transparent.
Example:
<div id="slider_outer1">
<div class="slider_segment"><img src="myurl.png" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"><div id='triangle-down'></div></div>
</div>
<style>
.container {width:400px;}
#slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}
.slider_segment {width: 100%; float: left; display: inline;}
#slider_marker1 {
position: absolute;
border: 2px solid #574fff;
height: 30px;
width: 5%;
top: 120px;
left: 57.25%;
text-align: center;
Margin-left: -10%;
padding: 5px 0px;
background: #ffffff;
border-radius: 5px;
}
#triangle-down {
position: absolute;
top: 40px;
right: 50%;
transform: translateX(50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid blue;
}
div#slider_marker1:after {
content: "5";
font-size: 20px;
padding: 5px;
line-height: 30px;
font-family: sans-serif;
}
</style>
See my codepen here: https://codepen.io/anon/pen/bvXOab
You could add another div for the triangle like
<div id='triangle'></div>
Css For the triangle...
#triangle{
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 80px solid blue;
}
However I feel that your problem is not that it just isnt appearing its that the positioning is messed up so its 'hidden' behind the sliders
I think I understand what you're trying to make. This should add a triangle above the marker. This solution should allow you to also remove anything related to triangle-down as it only requires the slider_marker1 div
#slider_marker1::before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -6px;
left: 0;
right: 0;
margin: auto;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid green;
z-index: 100;
}
I have following html for my site:
Edit: https://jsfiddle.net/3v66fv3u/1/ for the static site
and my approach of making the site responsive: https://jsfiddle.net/wba321bm/
<!DOCTYPE html>
<html>
<head>
<link href="custom.css" rel="stylesheet">
</head>
<body>
<h1 class="title">Headline</h1>
<div class="wrapper">
<div class="left">
<div class="top">
<img id="img_1" src="img_1.png">
</div>
<div class="bottom">
<img id="img_3" src="img_3.png">
</div>
</div>
<div class="middle">
<div class="about-text">
<h3>small headline</h3>
<p>actually a lot of text</p>
</div>
</div>
<div class="right">
<div class="top">
<img id="img_2" src="img_2.png">
</div>
<div class="bottom">
<img id="img_4" src="img_4.png">
</div>
</div>
</div>
<img class="banner" src="banner.png"/>
</body>
</html>
And this is my current css file:
html {
font-family: "Verdana", Geneva, sans-serif;
color: white;
}
body {
margin: auto;
background-color: black;
width: 1150px;
}
hr {
border-top: 1px dotted black;
}
.title {
text-align: center;
padding-bottom: 20px;
}
.wrapper {
margin: auto;
}
.left {
float: left;
}
.middle {
height: 597px;
width: 550px;
float: left;
border-top: 1px solid white;
border-bottom: 1px solid white;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin-top: -4px;
}
.about-text {
margin-left: 25px;
margin-right: 25px;
}
.right {
float: left;
}
.gallery {
padding-top: 100px;
width: 100%;
text-align: center;
}
img {
height: 300px;
transition: 0.5s ease;
backface-visibility: hidden;
/* inline-block fügt standardmäßig 4px Padding hinzu
das muss nun wieder subtrahiert werden. */
margin-top: -4px;
}
img:hover {
opacity: 0.5;
}
#img_1 {
border-top-left-radius: 30px;
}
#img_2 {
border-top-right-radius: 30px;
}
#img_3 {
border-bottom-left-radius: 30px;
}
#img_4 {
border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
width: 410px;
height: 90px;
position: absolute;
right: 0px;
bottom: 0px;
}
The website currently looks like this (with static layout):
Now I want to go away from the fixed layout and want to make the website responsive. However, when I give the fields a relative width the whole layout gets messed up...
This is the css I tried to use to achieve the responsive layout:
html, body {
font-family: "Verdana", Geneva, sans-serif;
color: white;
background-color: black;
height: 100%;
}
hr {
border-top: 1px dotted black;
}
.title {
text-align: center;
padding-bottom: 20px;
}
.wrapper {
border: 1px solid white;
margin: auto;
width: 80%;
}
.left {
float: left;
}
.middle {
width: 40%;
height: auto;
float: left;
border-top: 1px solid white;
border-bottom: 1px solid white;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin-top: -4px;
}
.about-text {
margin-left: 25px;
margin-right: 25px;
}
.right {
float: left;
}
.gallery {
padding-top: 100px;
width: 100%;
text-align: center;
}
img {
width: 40%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
/* inline-block fügt standardmäßig 4px Padding hinzu
das muss nun wieder subtrahiert werden. */
margin-top: -4px;
}
img:hover {
opacity: 0.5;
}
#img_1 {
border-top-left-radius: 30px;
}
#img_2 {
border-top-right-radius: 30px;
}
#img_3 {
border-bottom-left-radius: 30px;
}
#img_4 {
border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
width: 20%;
height: 10%;
position: absolute;
right: 0px;
bottom: 0px;
}
It's a matter of WHICH elements get the percentage value. In my adaptation of your fiddle, I assigned width: 30% to .left and right (which are the containers for the images) and made the image width 100% to span the whole width of their containers.
See here: https://jsfiddle.net/35n4dxqn/1/
well, when you give a or a division relative attribute it will be placed relative or according to the previous div i.e. it will not be independent from other divisions.
the solution if you want to make it responsive one forward and efficient way is to use Grid System (Bootstrap class).
This question already has answers here:
I want to add a border to my button on hover event without moving the button or anything [duplicate]
(7 answers)
Closed 6 years ago.
My idea is to add a colored border to the submit button when the user hovers it.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
But the immediately following text then becomes shifted downwards.
How can I get rid of these "Jumping" text while simultaneously having the border?
You need to define transparent border by default on button and change border-color on hover. Further avoid changing font-weight property on hover as well as it will also expand the width and height of button and it will jump on hover.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border: 6px solid transparent;
font-weight: 800;
border-radius: 4px;
padding: 5px 10px;
}
button:hover {
border-color: crimson;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Add "margin" attributes to your "button" CSS like so:
button {
border-radius: 4px;
padding: 5px 10px;
margin: 4px 0;
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
margin: 0;
}
From Stop an element moving with padding on hover.
Just to give an alternative you could use outline to set the "border" on hover.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border: 0;
border-radius: 4px;
padding: 5px 10px;
margin: 5px 0;
}
button:hover {
outline: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Another option:
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
margin: 6px 0;
border-width: 2px;
border-style: outset;
border-color: buttonface;
}
button:hover {
border-width: 6px;
border-style: solid;
border-color: crimson;
font-weight: 800;
margin: 2px 0;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Here are some possibilities:
Style the button dimensions (padding/margin/border) with the same px/em values like it's :hover state
set the button position to absolute/fixed
Use a fix height in a parent div
check now
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
border: 6px solid transparent;
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Try adding height to button
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
height:40px
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Add padding of the same size as the border to the button, and remove it on hover.
Mention the width and height to the button and remove the font-weight to avoiding a shifting of the element when hover the elements. Check below code.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
height:50px;
width:100px;
}
button:hover {
/*font-weight: 800;
background-color: white;*/
border: 6px solid crimson;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
height:50px;
width:100px;
}
button:hover {
border: 6px solid crimson;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:
The final nav will look like an extended version of this:
I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:
.arrowEndOn {
font-size: 10px; line-height: 0%; width: 0px;
border-top: 11px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
border-left: 5px solid transparent;
border-right: 5px solid #FFFFFF;
float: left;
cursor: pointer;
}
.arrowBulkOn {
height: 20px;
background: #FFFFFF;
padding: 2px 5px 0px 0px;
float: left;
color: #000000;
line-height: 14pt;
cursor: pointer;
}
.arrowStartOn {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 5px solid #FFFFFF;
border-right: 0px solid transparent;
float: left;
cursor: pointer;
}
<div id="nav" class="navArrow" style="position: relative;">
<div class="arrowEndOn" id="nav"> </div>
<div class="arrowBulkOn" id="nav">NAV</div>
<div class="arrowStartOn" id="nav"> </div>
</div>
Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other.
I'm handling the rollovers and on states with Javascript.
My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.
I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.
I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/
The red border has overflow: hidden; and the blue doesn't.]
My question is: How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.
Thanks
Add a negative margin to each arrow:
.navArrow {
float: left;
margin-left: -8px;
}
Demo: http://jsfiddle.net/S7hzu/2/
Flexbox
You can use this example
https://codepen.io/WBear/pen/pPYrwo
it works on new browsers, to support old ones some changes needed.
HTML:
<div class="content">
<div class="as1">
NAV
</div>
<div class="as2">
NAV
</div>
<div class="as3">
NAV
</div>
</div>
CSS:
.content {
margin-top: 10px;
width: 100%;
display: inline-flex;
}
.as1, .as2, .as3 {
height: 70px;
min-width: 8%;
max-width: 100%;
background-color: black;
position: relative;
display: inline-flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
}
.as1 a, .as2 a, .as3 a {
text-decoration: none;
display: inline-flex;
color: white;
margin: auto;
font-size: 14pt;
}
.as1:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid black;
border-bottom: 35px solid transparent;
z-index: 2;
}
.as2 {
background-color: grey;
margin-left: -29px;
}
.as2:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid grey;
border-bottom: 35px solid transparent;
z-index: 3;
}
.as3 {
background-color: #A9A9A9;
margin-left: -29px;
}