CSS3 circle with hover - javascript

I have a problem creating this effect with CSS3. I know it's possible, but i can't figure out how to do it. We created it with Javascript (https://vimeo.com/104875594). Is there anyone of you who can help with this?
The problem is that the rotation animation will run backwards when you go from left to right in the circle, because your primary position is in the top. We need it to go 360 degrees around, and not only 180 degree.
Thanks.
You can see the code here: http://codepen.io/Seierup/pen/laEiB
<div class="about">
<div class="about-circle">
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div id="indicator-wrapper">
<div class="arrow-Wrapper"></div>
<div id="logo">R</div>
</div>
</div>
</div>
</div>
CSS
.about .about-circle .box-container {
width: 100%;
height: 680px;
background: #F7F7F7;
position: relative;
}
.about .about-circle .box-container .box {
padding-top: 20px;
width: 50%;
height: 50%;
position: relative;
float: left;
border: 1px solid #333;
text-align: center;
}
.about .about-circle #indicator-wrapper {
width: 150px;
height: 150px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -75px 0 0 -75px;
}
.about .about-circle #indicator-wrapper .arrow-Wrapper {
width: 166px;
height: 166px;
border-radius: 50%;
position: relative;
background: #ccc;
margin: -10px;
transition: all 300ms ease;
}
.about .about-circle #indicator-wrapper .arrow-Wrapper:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-bottom: 20px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
top: 12px;
left: -4px;
transform: rotateZ(-46deg);
}
.about .about-circle #indicator-wrapper .arrow-Wrapper:after {
content: "";
position: absolute;
background: #333;
width: 80px;
height: 80px;
top: 0;
left: 0;
border-top-left-radius: 200px;
}
.about .about-circle #logo {
width: 120px;
height: 120px;
background: #ffffff;
z-index: 111;
border-radius: 50%;
position: absolute;
top: 12px;
left: 12px;
color: #333;
font-size: 5em;
font-weight: bolder;
text-align: center;
line-height: 120px;
}
.about .about-circle .box-container .box:nth-of-type(1):hover ~ #indicator-wrapper .arrow-Wrapper {
transform: rotateZ(0deg);
}
.about .about-circle .box-container .box:nth-of-type(2):hover ~ #indicator-wrapper .arrow-Wrapper {
transform: rotateZ(90deg);
}
.about .about-circle .box-container .box:nth-of-type(3):hover ~ #indicator-wrapper .arrow-Wrapper {
transform: rotateZ(-90deg);
}
.about .about-circle .box-container .box:nth-of-type(4):hover ~ #indicator-wrapper .arrow-Wrapper {
transform: rotateZ(180deg);
}

I can see that you are new here so please in the future provide some code and jsfiddle we are here to help you not to do the work for you .
Using Pure CSS you can do this in fullscreen
DEMO
STYLE:
*{box-sizing:border-box; padding:0; margin:0;}
[id=overview]{
width:650px;
height:480px;
background: #F7F7F7;
position:relative;
}
[id=overview] img{
width:50px;
height:50px;
position:relative;
background:#333;
}
[id=overview] figcaption{
color: #B6B6B6;
margin-top: 10px;
}
[id=overview] figure{
padding-top:20px;
width:50%;
height:50%;
position:relative;
float:left;
border:1px solid #333;
text-align:center;
}
[id=indicator-wrapper]{
width:150px;
height:150px;
border-radius:50%;
position:absolute;
top:50%;
left:50%;
margin: -75px 0 0 -75px;
}
[class=arrow-Wrapper]{
width: 166px;
height: 166px;
border-radius: 50%;
position: relative;
background: #ccc;
margin:-10px;
transition: all 300ms ease;
}
[class=arrow-Wrapper]:before,[class=arrow-Wrapper]:after{
content:"";
position:absolute;
}
[class=arrow-Wrapper]:before{
width: 0;
height: 0;
border-bottom: 20px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
top: 12px;
left: -4px;
transform: rotateZ(-46deg);
}
[class=arrow-Wrapper]:after{
background: #333;
width: 80px;
height: 80px;
top: 0;
left: 0;
border-top-left-radius: 200px;
}
[id=logo]{
width: 120px;
height: 120px;
background: rgb(255, 255, 255);
z-index: 111;
border-radius: 50%;
position: absolute;
top: 12px;
left: 12px;
color: #333;
font-size: 5em;
font-weight: bolder;
text-align: center;
line-height: 120px;
}
[id=overview] figure:nth-of-type(1):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
transform: rotateZ(0deg);
}
[id=overview] figure:nth-of-type(2):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
transform: rotateZ(91deg);
}
[id=overview] figure:nth-of-type(3):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
transform: rotateZ(269deg);
}
[id=overview] figure:nth-of-type(4):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
transform: rotateZ(180deg);
}
MARKUP:
<section id=overview>
<figure>
<img/>
<figcaption>
Some Text
</figcaption>
</figure>
<figure>
<img/>
<figcaption>
Some Text
</figcaption>
</figure>
<figure>
<img/>
<figcaption>
Some Text
</figcaption>
</figure>
<figure>
<img/>
<figcaption>
Some Text
</figcaption>
</figure>
<div id=indicator-wrapper>
<div class=arrow-Wrapper></div>
<div id=logo>R</div>
</div>
</section>

Don't know if this is exactly what you are looking for but it can work as a good reference on how to rotate something 360 degrees around. You can use
transform: rotate(-1turn); //or positive numbers to turn clockwise
Here is the whole example.
http://demosthenes.info/blog/860/Animating-Elements-In-Arcs-Circles-and-Ellipses-With-CSS

Related

How to add a whole section using JavaScript?

So I am trying to write a script to add a whole, newly added, section to Adobe Analytics. I am not sure I can do it though, so I will appreciate your help. I thought I should add a class name to the section and use document.getElementsbyClassName but it does not seem to work? I also need to add the nested divs and their styles again using JS?
Here is my code:
<section class="flex-columns" style="
background-color: crimson;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
">
<div style="
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
">
<p style="
top: 187px;
left: 391px;
width: 31px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
opacity: 1;
margin-top: 65px;
margin-left: 30px;
color: black;
border-style: solid;
border-color: black;
">1</p>
<p style="
top: 326px;
left: 391px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
">Find your nearest store</p>
</div>
<div style="
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
">
<p style="
top: 187px;
left: 811px;
width: 66px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
color: black;
opacity: 1;
margin-top: 65px;
margin-left: 30px;
">2</p>
<p style="
top: 326px;
left: 811px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
">Book a free hearing test</p>
</div>
<div style="
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
">
<p style="
top: 187px;
left: 1231px;
width: 68px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
color: black;
border: 2px;
border-color: black;
margin-top: 65px;
margin-left: 30px;
">3</p>
<p style="
top: 326px;
left: 1231px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
/* margin-bottom: 0px; */
">Get supported by our experts</p>
</div>
</section>
Since the post editing queue is full, I am sharing the current work in this area again. Could you explain the problem more clearly?
/* I don't understand what the problem is and what you want to do! */
.section-style {
background-color: crimson;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
}
/* Common */
.columns {
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
}
.titles{
top: 187px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
margin-top: 65px;
margin-left: 30px;
color: black;
}
.contents{
top: 326px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
}
/* Titles */
.title-first {
left: 391px;
width: 31px;
opacity: 1;
border-style: solid;
border-color: black;
}
.title-second {
left: 811px;
width: 66px;
opacity: 1;
}
.title-thirth {
left: 1231px;
width: 68px;
border: 2px;
border-color: black;
}
/* Contents */
.content-first {
left: 391px;
height: 152px;
}
.content-second {
left: 811px;
}
.content-thirth {
left: 1231px;
/* margin-bottom: 0px; */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Application</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="flex-columns section-style">
<div class="columns">
<p class="titles title-first">1</p>
<p class="contents content-first">Find your nearest store</p>
</div>
<div class="columns">
<p class="titles title-second">2</p>
<p class="contents content-second">Book a free hearing test</p>
</div>
<div class="columns">
<p class="titles title-thirth">3</p>
<p class="contents content-thirth">Get supported by our experts</p>
</div>
</section>
</body>
</html>

How to create a transparent dark overlay above image with text?

I want a to create a transparent dark image overlay above image with text. with a nice transition on hover.
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
}
.title {
margin: 0 auto;
width: 60%;
display: block;
font-size: 1.25em;
color: #ccc;
text-align: center;
padding-top: 120px;
}
<div class="study1">
<div class="">
<a class="title" href="#">View Case Study</a>
</div>
</div>
the design I wanted is this:
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
position:relative;
z-index:1;
}
.study1:after{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
z-index:-1;
}
.title {
margin: 0 auto;
width: 60%;
display: block;
font-size: 1.25em;
color: #ccc;
text-align: center;
padding-top: 120px;
}
.transparent-dark {
background: rgba(0, 0, 0, 0.5);
height:100%;
}
<div class="study1">
<div class="transparent-dark">
<a class="title" href="#">View Case Study</a>
</div>
</div>
See below. Using the :after pseudo code the background is set with opacity 0. On hover, the opacity is changing to 0.3 with a duration of 1 second.
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
position: relative;
}
.study1:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
transition: background 1s ease;
}
.study1:hover:after {
background: rgba(0, 0, 0, 0.3);
}
.title {
margin: 0 auto;
width: 60%;
display: block;
font-size: 1.25em;
color: #ccc;
text-align: center;
padding-top: 120px;
}
<div class="study1">
<div class="">
<a class="title" href="#">View Case Study</a>
</div>
</div>
Set the transparent dark image overlay using the class .wrapper mentioned in the js fiddle, set the position: relative to .study1 and position other elements accordingly.
Here is the js fiddle.
This may serve your purpose
.image {
position:relative;
width:200px;
height:200px;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content: attr(data-content);
color:#fff;
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
<div data-content="Here is some text added on hover via a content value of attr(data-content)" class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
for more details please go here https://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css
Use this code
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
position:relative;
z-index:1;
}
.study1:after{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
z-index:-1;
-webkit-transform:scale(0);
transform:scale(0);
-webkit-transition:0.5s;
transition:0.5s
}
.study1:hover:after{
-webkit-transform:scale(1);
transform:scale(1);
}
.title {
margin: 0 auto;
width: 60%;
display: block;
font-size: 1.25em;
color: #ccc;
text-align: center;
padding-top: 120px;
}
<div class="study1">
<div class="">
<a class="title" href="#">View Case Study</a>
</div>
</div>
.study1 {
background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
height: 300px;
width: 400px;
position: relative;
}
.action {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.4);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.study1:hover .action {
height: 100%;
}
.title {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="study1">
<div class="action">
<a class="title" href="#">View Case Study</a>
</div>
</div>
I think it may suites your requirement. A neat transition.
.container {
display: flex;
position: relative;
border: 1px solid: #ddd;
width: 300px;
height: 300px;
}
.overlay {
position: absolute;
left: 0;
padding: 20px;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(127, 127, 127, 0.6);
transition: all 0.3s ease;
}
.content {
width: 300px;
height: 300px;
background-image: url('http://mays.tamu.edu/citycentre/wp-content/uploads/sites/44/2015/07/pmbaclass.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.text {
font-size: 25px;
text-transform: uppercase;
color: #fff;
display: inline-flex;
justify-content: center;
text-align: center;
transition: all 0.8s ease;
}
.overlay:hover .text {
transform: scale(1.2, 1.2);
}
<div class="container">
<div class="overlay">
<span class="text">The World's finest developers</span>
</div>
<div class="content">
</div>
</div>
Here is a snippet according to your requirement.

How to create arrows (with 3 lines) in CSS?

Above Image shows how i wish them to look like:
I have created some arrows which currently look like this:
here is the fiddle demo:
https://jsfiddle.net/yokeshsharma/a94a1grk/
.arrow {
display: inline-block;
font-style: normal;
position: relative;
width: 0.8em;
height: 0.8em;
border-right: 0.4em solid black;
border-top: 0.4em solid black;
transform: rotate(-45deg);
left: 16px;
top: 18px;
}
.up{
transform: rotate(-45deg);
}
.down{
transform: rotate(135deg);
}
.left{
transform: rotate(-135deg);
}
.right{
transform: rotate(45deg);
}
<div class="up arrow">
</div>
<div class="down arrow">
</div>
<div class="left arrow">
</div>
<div class="right arrow">
</div>
I have searched other questions most of them are specifically about creating triangles and arrows without the central line which i already created.
But I am not able to create the line in between, please help !
Try something like this
.icon {
height: 100px;
width: 100px;
border-radius: 10px;
background: #323335;
text-align: center;
display: inline-block;
margin: 5px;
}
.arrow {
height: 35px;
position: relative;
width: 10px;
background: white;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
.arrow:before {
content: " ";
width: 10px;
background: white;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(50deg);
left: -10px;
}
.arrow:after {
content: " ";
width: 10px;
background: white;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(-50deg);
right: -10px;
}
.arrow-down {
transform: rotate(-180deg) translateY(50%);
bottom: 50%;
}
<div class="icon">
<div class="arrow"> </div>
</div>
<div class="icon">
<div class="arrow arrow-down"> </div>
</div>
Look at this one
.container {
width:100px;
height:100px;
margin: 20px auto;
}
.rect {
width: 50px;
height: 50px;
top:35px;
position: relative;
background-color: #777;
transform: rotate(45deg);
}
.rect1 {
width: 50px;
height: 50px;
position: relative;
background-color: #fff;
transform: rotate(45deg);
}
.v-rule {
width: 10px;
height: 50px;
position: relative;
background-color: #777;
top:-60px;
margin-left:20px
}
<div class="container">
<div class="rect"></div>
<div class="rect1"></div>
<div class="v-rule"></div>
</div>

Center a dynamic <div> on screen

I'm trying to create a gallery-page as a list of thumbnails. When a thumbnail is clicked, the related picture opens in a "popup"-div showing the full size of the image.
What I'm having problems with is centering that div on the screen. Each picture has different dimensions.
How to do this with javascript / jQuery?
JSFiddle: http://jsfiddle.net/29bo2k9q/
HTML:
<div id="pic1" class="white_content"><img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-
xap1/v/t1.0-9/1378748_520568708029338_926300946_n.jpg?oh=d092e1f660360c84033f6144010052f9&oe=54F4B302"/></div>
<div id="pic2" class="white_content"><img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-xaf1/v/l/t1.0-9/539421_418922361527307_1534426043_n.jpg?oh=006a46697258683be3423d378cf40feb&oe=54ABD335"/></div>
<div id="fade" class="black_overlay"></div>
<div id="wrapper">
<section id="gallery">
<ul>
<li style="background-image: url('https://scontent-a-fra.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/1378748_520568708029338_926300946_n.jpg?oh=d092e1f660360c84033f6144010052f9&oe=54F4B302');">
</li>
<li style="background-image: url('https://scontent-a-fra.xx.fbcdn.net/hphotos-xaf1/v/l/t1.0-9/539421_418922361527307_1534426043_n.jpg?oh=006a46697258683be3423d378cf40feb&oe=54ABD335');">
</li>
</ul>
</section>
</div>
CSS:
#gallery {
text-align: center;
width: 100%;
}
#gallery ul{
display: block;
padding: 0;
list-style: none;
overflow: hidden;
}
#gallery ul li {
display: inline-block;
vertical-align: top;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 250px;
height: 250px;
margin: 2.5%;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */
cursor: pointer;
.black_overlay{
cursor: pointer;
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: 0 auto;
border: 8px solid orange;
background-color: #eee;
z-index:1002;
}
.gallerylink{
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
You could achieve this by adding transform: translate(-50%, -50%);, left: 50%; and top: 50%; to .white_content like this:
JSFiddle - DEMO
.white_content {
position: absolute;
display: none;
margin: 0 auto;
border: 8px solid orange;
background-color: #eee;
z-index:1002;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You should also add vertical-align: middle; to your images to remove the below space - DEMO

Css Transform Not Working Correctly

So I'm trying to do this typography transformation. I have the letter in all white. When I hover the mouse on top, the top half of the letter should flip down exposing a different color. The problem is that it's flipping down the wrong div.
tback is the lower part of letter A.
tfront is the upper part of letter A.
HTML code:
<div id="letter-container" class="letter-container">
<h2><a href="#">
<div class="twrap">
<div class="tup">
<div class="tback"><span>A</span></div>
<div class="tfront"><span>A</span></div>
</div>
<div class="tbg"><span>A</span></div>
<div class="tdown"><span>A</span></div>
</div></a></h2>
</div>
HERE IS THE CSS:
.letter-container h2 .twrap{
position: relative;
display: inline-block;
width: 100px;
height: 120px;
line-height: 120px;
font-size: 120px;
box-shadow: 1px 1px 4px #000;
}
.letter-container h2 .tbg{
background: #121212;
position: absolute;
color: #f2c200;
width: 100%;
height: 100%;
z-index: -10;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tdown{
height: 50%;
top: 50%;
width: 100%;
position: absolute;
overflow: hidden;
z-index: 1;
background: #151515;
color: white;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
transition: all 0.3s linear;
}
.letter-container h2 .tdown span,
.letter-container h2 .tup .tback span{
display: block;
margin-top:-60px;
}
.letter-container h2 .tup{
height: 50%;
width: 100%;
position: absolute;
z-index: 10;
-webkit-transform-origin: 50% 100%;
transition: all 0.3s linear;
color: white;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tup .tfront{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
overflow: hidden;
background: #151515;
}
/*Drop down part*/
.letter-container h2 .tup .tback{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
overflow: hidden;
background: #151515;
color: #f2c200;
}
.letter-container h2 .tup .tdown{
background: red;
color: red;
}
.letter-container h2 .tup .tback{
-webkit-transform: rotateX(180deg);
}
.letter-container h2 a .twrap:hover .tup {
-webkit-transform: rotateX(180deg);
}
Here is a JSFiddle showing the problem:
http://jsfiddle.net/g4zja/
Not sure what exactly is the desired effect. Maybe this?
fiddle
.letter-container h2 a .twrap:hover .tup {
-webkit-transform: rotateX(90deg);
}

Categories