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
Related
i'm working on a full screen menu for a website but I need to disable the user to scroll while the menu is open. I can't find a fitting solution on the internet so it would be great if anyone could help me. I am not sure how to trigger the body to no-scroll if the menu is open. I am not that familiar with js.
Here is my code at the moment:
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
menu.style.top = "-100vh";
}
function openmenu(){
menu.style.top = "0";
}
</script>
</body>
And that's the CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
Thanks for your help!
I used document.querySelector('body').classList.add('no-scroll') when menu opened & document.querySelector('body').classList.remove('no-scroll') when menu closed.
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
document.querySelector('body').classList.remove('no-scroll')
menu.style.top = "-100vh";
}
function openmenu(){
document.querySelector('body').classList.add('no-scroll')
menu.style.top = "0";
}
</script>
</body>
I am still in the process of learning HTML/CSS/Js and was following this tutorial on youtube.
https://www.youtube.com/watch?v=7MDJtw3ZF-4&t=893s
My issue is at around 20:15 time stamp, my eyes.png do not appear. I find this odd because my face.png shows up perfectly fine, which is in the same folder.
<p class="location"></p>
<div class="container">
<div class="face_body">
<div class="face">
<div class="eye_pan">
<div class="pan_area">
<div class="eye eye_l">
<div class="eye eye_r">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and my css
html,body, .container{
height: 100%;
width: 100%;
outline: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
.location{
position: fixed;
top: 0px;
right: 0px;
margin: 0px;
background: rgba(255,255,255,0.4);
padding: 10px;
}
.container{
display: table;
background: rgb(251,220,0);
background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}
.face_body{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.face{
height: 200px;
width: 200px;
margin: auto;
background: url(images/face1.1.png);
background-size: 173px 200px;
background-repeat: no-repeat;
}
.eye_pan{
display: table;
padding: 30px 50px;
}
.pan_area{
width: 70px;
height: 55px;
position: relative;
}
.eye{
height: 20px;
width: 20px;
border-radius: 5px;
position: absolute;
margin-left: 5px;
transition: .5s height ease-in-out;
border: 1px solid red;
background: url(images/eyes.png);
}
.eye_r{
top: 0px;
left: 20px;
}
.eye_l{
top: 50px;
left: 25px;
}
any reasons on why my eyes.png are not showing would be great. Thanks.
Your .eye url background is probably linking to a wrong URL file or it is simply out of the view.
Try inserting background-size: cover; or set it a background-size if the images is loding fine.
html,body, .container{
height: 100%;
width: 100%;
outline: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
.location{
position: fixed;
top: 0px;
right: 0px;
margin: 0px;
background: rgba(255,255,255,0.4);
padding: 10px;
}
.container{
display: table;
background: rgb(251,220,0);
background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}
.face_body{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.face{
height: 200px;
width: 200px;
margin: auto;
background: url(https://images.vexels.com/media/users/3/134743/isolated/preview/97ae591756f3dc69db88c09fd097319a-sad-face-emoji-emoticon-by-vexels.png);
background-size: 173px 200px;
background-repeat: no-repeat;
}
.eye_pan{
display: table;
padding: 30px 50px;
}
.pan_area{
width: 70px;
height: 55px;
position: relative;
}
.eye{
height: 20px;
width: 20px;
border-radius: 5px;
position: absolute;
margin-left: 5px;
transition: .5s height ease-in-out;
border: 1px solid red;
background: url(//cdn.playbuzz.com/cdn/e732686f-35b2-4be6-a5fa-52f388bb0d0d/3637262a-2c14-43b0-9be2-b2174055f790_560_420.jpg);
background-size:cover;
}
.eye_r{
top: 0px;
left: 20px;
}
.eye_l{
top: 50px;
left: 25px;
}
<p class="location"></p>
<div class="container">
<div class="face_body">
<div class="face">
<div class="eye_pan">
<div class="pan_area">
<div class="eye eye_l">
<div class="eye eye_r">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Check if your spellings are correct like 'eye' instead of 'eyes' also check the file format if its say 'jpg' and not 'png'.
Try clearing your browser cache just incase your browser did not load new files
Apply correct CSS syntax for background property and check whether your image path is correct or not.
background: url('images/eyes.png');
Try this and let me know if problem is still raised.
Have a nice day, Cheers !!!
I would like to layer multiple DIVs on top of one another while using flexbox to vertically and horizontally center them both.
In the example below, I would like both .whitebox and .bluebox to be vertically and horizontally centered inside of the container, overlapping one another. Currently .whitebox is positioned with absolute position. Is this possible?
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
</div>
No need to position the top and left. Just applying absolute positioning is enough because that "pops" the elements into their own layers, so they can be placed at will without affecting other elements in that layer. Once you do that, the align-items and justify-content will do their jobs.
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
}
.border {
height: 16px;
width: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
<div class="border"></div>
</div>
You can just remove the offsets like below, it will get the small box centered with the existing rules you set on everything else.
.whitebox {
...
/* top: 0; */
/* left: 0; */
}
Edit: The above works in Chrome, but doesn't seem to be working in Firefox.
In fact, I would simplify the entire code as follows. It should work everywhere where flexbox is supported.
.bluebox {
display: flex;
align-items: center;
justify-content: center;
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
}
<div class="bluebox">
<div class="whitebox"></div>
</div>
I would rather use the usual method for centering: The container gets position: relative and defined width and height, the elements to-be-centered inside the container get this CSS:
.centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Plus z-index values for the order in which they are above each other, and possibly opacity so they all can be seen simultaneously...
So in your example, that would be
.container {
height: 16px;
width: 16px;
background-color: white;
border-radius: 4px;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
</div>
The flexbox properties are superfluous when you do it this way.
Set your divs up like this:
<div class="parent">
<div class="wrapper">
<div class="whitebox"></div>
<div class="bluebox"></div>
</div>
</div>
Then apply this css:
.parent{
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
position:relative
}
.whitebox, .bluebox{
position:absolute;
top:0;
left:0;
}
You can use margin-left and margin-top because you know the height and width of your element.
Explanation:
Move your element from top 50% and from left 50%.
Move your element 4px from right and 4px from bottom.
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px
}
.border {
height: 16px;
width: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
<div class="border"></div>
</div>
So when I used jquery to animate some padding instead of animation as if the anchor point is from the center it animates from the top left. All the code and a JSFiddle link are down below.
JSFiddle
HTML:
<div id="gaming-news-info">
<a id="news-button" style="cursor:pointer;">Go to News section</a>
</div>
CSS:
#gaming-news-info {
position: absolute;
z-index: 999;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
margin-top: -100px;
}
#news-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
margin-top: 130px;
font-family: "Prompt-SemiBold";
margin-left: 90px;
}
You do not need jquery/javascript for a simple hover effect. CSS3 transitions and transformations are perfectly capable of doing the same thing without the overhead of a script library....
#gaming-news-info {
position: absolute;
z-index: 999;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
margin-top: -100px;
}
#news-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
margin-top: 130px;
font-family: "Prompt-SemiBold";
margin-left: 90px;
transform: scale(1);
transition: all .2s;
}
#news-button:hover {
transform: scale(1.05);
transition: all .2s;
}
<div id="gaming-news-info">
<a id="news-button" style="cursor:pointer;">Go to News section</a>
</div>
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