I am trying to get the following transition of the h1 tag working for the border-bottom of the div. Here's what I've set up for the h1 tag:
h1 {
text-align: center;
color: #666;
position: fixed;
display: inline-block;
}
h1:after {
position: absolute;
left: 50%;
content: '';
height: 5px;
background: blue;
transition: all 0.5s linear;
width: 0;
bottom: 0;
}
h1:hover:after {
width: 100%;
margin-left: -135px;
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
How do I make this work for the div border bottom? Here's what I came up with, and I see why it would't work (among other things the 'width' doesn't work for the border), but I can't figure out how to solve it.
h1 {
text-align: center;
color: #666;
position: fixed;
display: inline-block;
}
div:after {
border-bottom: 5px solid red;
left: 50%;
content: '';
transition: all 0.5s linear;
width: 0;
bottom: 0;
}
div:hover:after {
width: 300px;
margin-left: -135px;
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
Thanks in advance.
Try this:
div {
position: relative;
display: inline-block;
}
h1 {
color: #666;
margin: 0;
}
div::after {
border-bottom: 5px solid red;
position: absolute;
left: 50%;
content: ' ';
transform: translateX(-50%);
transition: width 0.5s linear;
width: 0;
height: 0;
bottom: 0;
}
div:hover::after {
width: 100%
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
using this
div{
position:fixed;}
and remove margin-left it will work
h1 {
text-align: center;
color: #666;
position: fixed;
display: inline-block;
}
div{
position:fixed;}
div:after {
position: absolute;
left: 50%;
content: '';
height: 5px;
background: blue;
transition: all 0.5s linear;
width: 0;
bottom: 0;
}
div:hover:after {
width: 100%;
left:0;
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
Try This:
div {
position: relative;<---Added
}
div:after {
position: absolute;<----Added
//more code....
}
h1 {
text-align: center;
color: #666;
position: fixed;
display: inline-block;
}
div {
position: relative;
}
div:after {
border-bottom: 5px solid red;
left: 50%;
content: '';
transition: all 0.5s linear;
width: 0;
bottom: 0;
position: absolute;
}
div:hover:after{
width: 300px;
margin-left: -155px;
}
<div style="height: 100px; width: 300px">
<h1>CSS IS AWESOME</h1>
</div>
Related
I've got the following CSS and HTML. The problem is, that when the mouse is moved over the button, the red rectangle flashes to the center instead of smoothly moving to the center. It is strange because when the mouse is moved away from the button, it moves back slowly. How can I make the red rectangle move to the center smooth?
.btn {
position: relative;
display: inline-block;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
top: -10px;
left: -10px;
}
.btn .bottom-right {
bottom: -10px;
right: -10px;
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='btn'>
<span class='btn-text'>button</span>
<div class='rect top-left blue-translucent'></div>
<div class='rect bottom-right red-translucent'></div>
</div>
For some reason, it didn't work with bottom: -10px and right: -10px. I'm not sure if this has to do with my code or if this is a browser problem, but the easy fix is to use the top and left properties instead:
.btn {
position: relative;
display: inline-block;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
top: -10px;
left: -10px;
}
.btn .bottom-right {
top: 10px;
left: 10px;
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='btn'>
<span class='btn-text'>button</span>
<div class='rect top-left blue-translucent'></div>
<div class='rect bottom-right red-translucent'></div>
</div>
.red-translucent {
background-color: red;
top: 10px;
left: 10px;
}
Use transform instead of top, left, bottom, right like this:
.btn {
position: relative;
display: flex;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
transform: translate(-10px, -10px);
}
.btn .bottom-right {
transform: translate(10px, 10px);
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
transform: translate(0px, 0px);
}
This will work smoothly on either the move-in or move-out of the pointer.
When hovering on each circle at the corner, background color in the main area should be changed so matches the color of the circle, and there is an adequate paragraph showing at the same time.
I have tried transition, opacity... but couldn't get it work.
Note, HTML has to be untouched.
* {
margin: 0;
padding: 0;
}
body {
position: relative;
height: 100vh;
text-align: center;
}
p {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.bg {
position: relative;
height: 100vh;
background-color: #333;
}
.circle {
height: 10px;
width: 10px;
border-radius: 50%;
border: white solid 2px;
z-index: 1;
}
.red.circle {
position: absolute;
top: 10%;
left: 10%;
background-color: red;
}
.green.circle {
position: absolute;
top: 10%;
right: 10%;
background-color: green;
}
.blue.circle {
position: absolute;
bottom: 10%;
left: 10%;
background-color: blue;
}
.orange.circle {
position: absolute;
bottom: 10%;
right: 10%;
background-color: orange;
}
p.red {
display: none;
background-color: red;
line-height: 100vh;
}
p.green {
display: none;
background-color: green;
line-height: 100vh;
}
p.blue {
display: none;
background-color: blue;
line-height: 100vh;
}
p.orange {
display: none;
background-color: orange;
line-height: 100vh;
}
<div class="red circle"></div>
<div class="green circle"></div>
<div class="blue circle"></div>
<div class="orange circle"></div>
<div class="bg">
<p class="red">Czerwony</p>
<p class="green">Zielony</p>
<p class="blue">Niebieski</p>
<p class="orange">Pomarańczowy</p>
</div>
Since they are somewhat in the same hierarchy, you can take advantage of the ~ general sibling selector which matches the second element only if it follows the first element (though not necessarily immediately):
/* added */
.red.circle:hover ~ .bg {
background-color: red;
}
.green.circle:hover ~ .bg {
background-color: green;
}
.blue.circle:hover ~ .bg {
background-color: blue;
}
.orange.circle:hover ~ .bg {
background-color: orange;
}
.red.circle:hover ~ .bg p.red { display: block; }
.green.circle:hover ~ .bg p.green { display: block; }
.blue.circle:hover ~ .bg p.blue { display: block; }
.orange.circle:hover ~ .bg p.orange { display: block; }
/* end of edit */
* {
margin: 0;
padding: 0;
}
body {
position: relative;
height: 100vh;
text-align: center;
}
p {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.bg {
position: relative;
height: 100vh;
background-color: #333;
transition: background-color 0.5s ease-in;
}
.circle {
height: 10px;
width: 10px;
border-radius: 50%;
border: white solid 2px;
z-index: 1;
}
.red.circle {
position: absolute;
top: 10%;
left: 10%;
background-color: red;
}
.green.circle {
position: absolute;
top: 10%;
right: 10%;
background-color: green;
}
.blue.circle {
position: absolute;
bottom: 10%;
left: 10%;
background-color: blue;
}
.orange.circle {
position: absolute;
bottom: 10%;
right: 10%;
background-color: orange;
}
p {
transition: background-color 1s ease-in;
}
p.red {
display: none;
background-color: red;
line-height: 100vh;
}
p.green {
display: none;
background-color: green;
line-height: 100vh;
}
p.blue {
display: none;
background-color: blue;
line-height: 100vh;
}
p.orange {
display: none;
background-color: orange;
line-height: 100vh;
}
<div class="red circle"></div>
<div class="green circle"></div>
<div class="blue circle"></div>
<div class="orange circle"></div>
<div class="bg">
<p class="red">Czerwony</p>
<p class="green">Zielony</p>
<p class="blue">Niebieski</p>
<p class="orange">Pomarańczowy</p>
</div>
You can add transition on the .bg class for the desired effect.
I would simplify your code to rely on pseudo element and data-attribute for background and content. It will be then easier to control as you don't need any complex selector:
body {
margin: 0;
background: #333;
min-height: 100vh;
}
.circle {
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
border: white solid 2px;
}
.circle::before {
content: attr(data-text);
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: white;
line-height: 100vh;
font-size: 80px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -2;
background: inherit;
opacity: 0;
transition: 1s;
}
.circle:hover::before {
opacity: 1;
}
.circle.red {
top: 10%;
left: 10%;
background: red;
}
.circle.green {
top: 10%;
right: 10%;
background: green;
}
.circle.blue {
bottom: 10%;
left: 10%;
background: blue;
}
.circle.orange {
bottom: 10%;
right: 10%;
background: orange;
}
<div class="circle red" data-text="Czerwony"></div>
<div class="circle green" data-text="Zielony"></div>
<div class="circle blue" data-text="Niebieski"></div>
<div class="circle orange" data-text="Pomarańczowy"></div>
The css only solution of #soulshined is great, but just in case anyone wants to use javascript - here's a hint:
const bg = document.querySelector(".bg");
const circles = document.querySelectorAll(".circle");
circles.forEach(circle => circle.addEventListener("mouseenter", (e) => {
const style = getComputedStyle(e.target);
const backgroundColor = style.backgroundColor;
bg.style.backgroundColor = backgroundColor;
}))
#circle { width: 100px; height: 100px;
position: relative;
background: gray; opacity: .6;
margin: 0 auto;
border-radius: 50%;
z-index: 2;}
#line { display: block; position: relative;
width: 100%; height: 5px;
background: red; top: -50px;
z-index: 1;}
<div id="circle"></div>
<div id="line"></div>
How to make parts of the red line that stay behind the circle invisible? Without changing the opacity of the circle to 1.
You don't need a separate "line" div for this.
body {
overflow: hidden;
background:grey;
}
#circle {
width: 100px;
height: 100px;
position: relative;
background: rgba(0,255,0,0.5); /* semi-transparent green */
opacity: .6;
margin: 0 auto;
border-radius: 50%;
z-index: 2;
}
#circle:before,
#circle:after {
content: '';
position: absolute;
width: 50vw;
top:50%;
height: 5px;
}
#circle:before {
left:0;
transform:translate(-100%,-50%);
background:red;
}
#circle:after {
left:100%;
transform:translate(0,-50%);
background:blue;
}
<div id="circle"></div>
Put a your circle inside a white circle see fiddle https://jsfiddle.net/v61bguns/
HTML
<div id="circle2"><div id="circle"></div></div>
<div id="line"></div>
CSS
#circle2 { width: 100px; height: 100px;
position: relative;
background: white;
margin: 0 auto;
border-radius: 50%;
z-index: 2;}
#circle { width: 100px; height: 100px;
position: relative;
background: gray; opacity: .6;
margin: 0 auto;
border-radius: 50%;
z-index: 3;}
#line { display: block; position: relative;
width: 100%; height: 5px;
background: red; top: -50px;
z-index: 1;}
I am creating a responsive website. I want to create below shape in CSS3. using ul li.
you could use a pseudo element, and have overflow:hidden set on the parent container.
html {
margin: 0;
padding: 0;
background: #222;
}
.wrap {
position: relative;
width: 100%;
height: 200px;
background: #222;
overflow: hidden;
}
.wrap div {
display: inline-block;
position: relative;
height: 100%;
width: 22%;
margin-left: 2%;
background: lightblue;
transition: all 0.6s;
line-height:200px;
text-align:center;
}
.wrap:before {
content: "";
position: absolute;
bottom: -25%;
left: 0;
height: 50%;
width: 100%;
border-radius: 50%;
background: #222;
z-index: 8;
}
div.withImage {
background: url(http://placekitten.com/g/300/300);
background-size: 100% 100%;
}
.wrap div:hover:before {
opacity: 1;
}
.wrap div:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: blue;
opacity: 0;
transition: all 0.6s;
}
<div class="wrap">
<div>ONE</div>
<div>TWO</div>
<div>THREE</div>
<div class="withImage">FOUR</div>
</div>
NOTE
This has been done using Divs. I have left it as an exercise for the OP to alter this code for ul li.
This can also be altered to include Dynamically added elements: JSFIDDLE
I have a test site here:
http://www.hugoproject.com/test.html
I'm trying to put a second row of the book icons beneath the first, but whatever I try doesn't work. To clarify the situation, the following code makes a single book icon appear:
<div class="project">
Arrow<span></span>
</div>
When I have two sets of the code, two icons appear, when there are three sets of the code three icons appear. But if I have four or more sets of the code only three icons appear! I want for the extra sets of code to make icons beneath the first three.
Also at the moment when you resize the browser window this makes the top row of icons resize dynamically. I'd like to keep this feature and make both rows of icons fit on the one page such that there is no scroll bar.
Any ideas?
HTML
<div id="content">
<div id="home-projects-wrapper">
<h1 class="home">Hello! My name is Brandon</h1>
<div id="home-projects">
<div id="projects" class="circle">
<div class="project-group">
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#container {
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
position: absolute;
width: 100%;
height: 100%;
left: 0;
overflow-x: hidden;
}
#container.open {
left: 270px;
position: absolute;
width: 100%;
height: 100%;
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
overflow-x: hidden;
}
#content {
width: 80%;
max-width: 1170px;
margin: 7% auto;
position: relative;
font-size: 14px;
line-height: 22px;
color: #777777;
}
.page-template-page-templateshome-php #content {
width: auto;
margin: 0 auto;
position: static;
}
.single-post #content {
width: 60%;
}
#home-projects {
text-align: center;
overflow: hidden;
position: relative;
}
#projects {
width: 100%;
}
.project-group {
width: 100%;
height: 100%;
position: absolute;
}
.project {
float: left;
text-align: center;
width: 33.3%;
height:100%;
}
.project-link {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #adadad;
position: relative;
overflow: hidden;
display: inline-block;
width: 80%;
}
.circle .project-link, .circle .project-link .hover {
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
.project-link .hexagon-top {
content: '';
display: block;
position: absolute;
left: 0;
border-style: solid;
border-bottom-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hexagon-bottom {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-top-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hover {
position: absolute;
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
color: #fff;
background: #ec6136;
text-decoration: none;
text-transform: uppercase;
display: block;
opacity: 0;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transitin: all .3s;
}
.project-link .hover-text {
display: block;
margin-top: 45%;
}
.project-link .hover-text:after {
content: '>';
font-family: 'icon';
font-size: 12px;
margin-left: 15px;
}
.project-link:hover > .hover {
opacity: .9;
}
If you want to continue with what you have now, just remove position:absolute from .project-group
You need to define a height for your blocks, i.e.
.project {
float: left;
text-align: center;
width: 33.3%;
height: 290px;
}
.HS {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 100%;
height: 290px;
background-image: url("http://www.hugoproject.com/ftp1/images/icons.png");
background-position: 0px 0px;
background-size: 800%;
}
That will not completely solve your issue though. Maybe you want to use images inside the boxes instead of a background image/icon. You can also always calculate new dimensions with JavaScript/jQuery.
I would set up a div container for the books with a set width equal to the width of the books + margins.
Then set the book divs to "float: left;" and it should put 3 books per line.
If you want to keep the auto scaling you should do all this with percentages like you are currently doing.