Css Transform Not Working Correctly - javascript

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);
}

Related

position: fixed won't keep the elements fixed to the bottom of an element

With the following styles:
#fullpage-menu > .gradient {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0.3rem;
}
where #fullpage-menu has the styling:
#fullpage-menu {
height: 100%;
width: 100%;
background-color: var(--secondary-button-color);
left: 0;
position: absolute;
top: 0;
animation: expand-fullpage-menu 500ms cubic-bezier(0.42, 0, 0.07, 1.43);
z-index: 1001;
animation-fill-mode: both;
padding: 1rem;
box-sizing: border-box;
overflow: hidden;
transform: translate(-100%);
overflow-y: auto;
}
and
.apply-for-org .apply-button {
background-color: var(--dark-secondary-button-color);
padding: 0.5rem 1rem;
border-radius: 10rem;
border: none;
cursor: pointer;
color: var(--title-color);
transition: all 300ms ease-out;
user-select: none;
display: block;
clear: left;
font-size: 1.3rem;
text-transform: capitalize;
font-family: bahnschrift;
letter-spacing: 0.05em;
margin: 1rem 0 0 1rem;
position: fixed;
bottom: 1rem;
left: 50%;
transform: translate(-50%);
font-weight: lighter;
}
Where .gradient is displayed on the bottom of each fullscreen menu, and .apply-button is displayed at the bottom of the .apply-for-org <div>, which also has the id #fullpage-menu.
In other words, the .apply-for-org menu should have a gradient bar at the bottom, which should stay there when scrolling through the div if the content height exceeds the screen height.
In addition, the HTML would look like this for a fullpage-menu:
<div id="fullpage-menu" class="apply-for-org">
<!--Content and other cool stuff-->
<button class="apply-button">Apply for Organisation</button>
<div class="gradient"></div>
</div>
So why does this not work? Why doesn't the gradient bar and the apply button stick to the bottom of the screen when scrolling through the content?
EDIT 15/04/2021:
#fullpage-menu {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #121a21;
overflow-y: auto;
}
#fullpage-menu > button.close {
padding: 0.5rem 1rem;
position: absolute;
top: 1rem;
right: 1rem;
border-radius: 10rem;
font-family: bahnschrift;
background-color: #070b0e;
border: none;
color: white;
}
#fullpage-menu .gradient {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0.2rem;
background: rgb(131,58,180);
background: linear-gradient(41deg, rgba(131,58,180,1) 0%, rgba(181,73,227,1) 28%, rgba(253,29,29,1) 83%, rgba(252,145,69,1) 100%);
}
.apply-for-org .apply-button {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translate(-50%);
background-color: #070b0e;
border-radius: 10rem;
border: none;
color: white;
padding: 0.5rem 1rem;
font-family: bahnschrift;
cursor: pointer;
}
/*Styling exclusive for this example*/
#example-content {
height: 100rem;
width: 70%;
margin: auto;
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
opacity: 0.5;
}
<div id="fullpage-menu" class="apply-for-org">
<button class="close">Close</button>
<div id="example-content"></div>
<button class="apply-button">Apply for Organisation</button>
<div class="gradient"></div>
</div>
I also noticed that it works just fine in the code snippet that I posted, but apparently it doesn't work as well on my locally hosted server..
If it matters, I'm using .ejs instead of .html, but it shouldn't be of any importance (i believe)
For anyone having the same problem in the distant or near future, it can be fixed by wrapping all the content in another div with position:block attribute:
<div id="fullpage-menu" class="apply-for-org">
<div class="main-wrapper">
<!--Place all the fancy content here-->
<div class="gradient"></div>
<button class="apply-button">Apply for Organisation</button>
</div>
</div>
And then by giving these styles, everything will work :)
#fullpage-menu {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #121a21;
overflow-y: auto;
}
#fullpage-menu .gradient {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0.2rem;
background: rgb(131,58,180);
background: linear-gradient(41deg, rgba(131,58,180,1) 0%, rgba(181,73,227,1) 28%, rgba(253,29,29,1) 83%, rgba(252,145,69,1) 100%);
}
.apply-for-org .apply-button {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translate(-50%);
background-color: #070b0e;
border-radius: 10rem;
border: none;
color: white;
padding: 0.5rem 1rem;
font-family: bahnschrift;
cursor: pointer;
}
/*This part is important!*/
.apply-for-org > .main-wrapper {
height: 100%;
width: 100%;
overflow-y: auto;
}
I don't know why, apparently my CSS and HTML knowledge is too limited, or I am too stupid, but at least this works. It wouldn't work without the .main-wrapper element wrapping all of the content.
EDIT:
disinfor mentioned something that might just as well work, haven't tried it though:
A fixed element can be positioned against its parent, if you set a transform property on the parent. Try adding transform: translate(0,0) to the parent element.

Issue with CSS Text box rendering in IE

I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.
Screenshots attached below.
Image in IE
Image in Chrome
Any help would be highly appreciated.
Code for the search box and the search text button:
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
}
/*
.search-box:hover ~ .category-box {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box:hover {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box {
position: absolute;
align-items: center;
top: 38%;
left: 50%;
text-decoration-color: white;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
width: 0px;
color: white;
visibility: collapse;
opacity: 0;
transition: width 1s, height 1s, transform 1s;
transition: opacity 1s;
}
*/
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
color: red;
}
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>
Can you set 400px in .search-box class should be work
Try to add the height property for the .search-text, code as below:
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
height:58px;
}
The output as below:

Text getting misaligned on hover

I'm building an image component with caption.
When the user mouse hover on the text on hover of the div element, it is changing the position of the text:
JSFiddle URL: https://jsfiddle.net/9jkze0o4/
CSS:
.inner-div {
position: relative;
display: inline-block;
box-shadow: 0 0px 15px 0px #d5d5d5;
padding: 0px;
margin: 0px;
position: relative;
display: inline-block;
border-style: solid;
border-width: 2px;
border-color: rgb(67, 67, 67);
background-color: rgb(204, 204, 204);
width: 150px;
height: 150px;
}
.inner-div:hover {
box-shadow: 0 0px 15px 0px #d5d5d5;
border-style: solid;
border-width: 28px;
border-color: rgb(67, 67, 67);
background-color: rgb(204, 204, 204);
}
.inner-div:hover .overlay {
display: block;
opacity: 1;
background: rgba(52,152,219,0.49);
border-radius: 13px;
text-align: center;
}
.inner-div .overlay:hover .overlay-icon i {
display: block;
position: absolute;
top: 40%;
-webkit-transform: translateX(-50%) translateY(-4%);
-ms-transform: translateX(-50%) translateY(-4%);
transform: translateX(-50%) translateY(-4%);
opacity: 1;
left: 50%;
}
On hover of the image, how to keep the text position as is?
Looks like your selector is not right when hovering. When hovering the inner-div all the styles applies to everything inside that block including the caption. To overcome this problem you will need to give the :hover to the box.
You can change this,
innder-div:hover
to be this,
box:hover
in your styles.
See the fiddle - https://jsfiddle.net/anjanasilva/jkwL3n0g/
Hope this helps.
Cheers.
You have to change inner-div:hover to box:hover
Here's a working Fiddle: https://jsfiddle.net/9jkze0o4/3/
This issue is because of the border-width:28px to class .inner-div:hover remove .inner-div:hover and give border to class .inner-div:hover .box as shown below:
.inner-div:hover .box {
border: 28px solid rgb(67, 67, 67);
}
* {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
.inner-div {
position: relative;
display: inline-block;
box-shadow: 0 0px 15px 0px #d5d5d5;
padding: 0px;
margin: 0px;
position: relative;
display: inline-block;
border-style: solid;
border-width: 2px;
border-color: rgb(67, 67, 67);
background-color: rgb(204, 204, 204);
width: 150px;
height: 150px;
}
.inner-div:hover {
box-shadow: 0 0px 15px 0px #d5d5d5;
background-color: rgb(204, 204, 204);
}
.inner-div:hover .overlay {
display: block;
opacity: 1;
background: rgba(52,152,219,0.49);
border-radius: 13px;
text-align: center;
}
.inner-div .overlay:hover .overlay-icon i {
display: block;
position: absolute;
top: 40%;
-webkit-transform: translateX(-50%) translateY(-4%);
-ms-transform: translateX(-50%) translateY(-4%);
transform: translateX(-50%) translateY(-4%);
opacity: 1;
left: 50%;
}
.inner-div:hover .box {
border: 28px solid rgb(67, 67, 67);
}
.box {
height: 100%;
display: block;
}
.box-label {
display: list-item;
margin: 0px auto;
line-height: 100%;
vertical-align: middle;
height: 100%;
overflow: hidden;
}
.box-label img {
position: relative;
top: 50%;
transform: translate(100%, -50%);
vertical-align: middle;
border-radius: 0px;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
}
.overlay {
background: rgba(52,152,219,0.49);
color: #FFFFFF;
text-align: center;
font-size: 40px;
border-radius: 13px;
margin-top: 0px;
cursor: pointer;
display: none;
vertical-align: middle;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
opacity: 1;
width: 100%;
height: 100%;
z-index: 1;
transition: display 0.5s;
}
.overlay-icon {
color: #FFFFFF;
font-size: 40px;
line-height: 100%;
}
.overlay-icon i {
display: block;
border-radius: 5px;
overflow: hidden;
vertical-align: middle;
opacity: 0;
top: 100%;
left: 50%;
transition: all ease-in-out 0.4s;
-webkit-transition: all ease-in-out 0.4s;
transform: translateX(-50%);
}
.caption-box {
font-size: 16px;
text-align: center;
color: #000000;
font-weight: bold;
margin-top: 0px;
word-break: break-word;
word-break: break-all;
line-height: normal;
vertical-align: middle;
display: inline-block;
z-index: 2;
text-align: center;
margin: 10px auto 20px auto;
height: auto;
width: 150px;
}
.caption-label {
vertical-align: top;
margin: 0px auto;
padding-right: 3px;
display: list-item;
line-height: 100%;
overflow: hidden;
word-break: break-word;
font-weight: inherit;
border: none !important;
min-width: 100px;
max-width: 150px;
}
<div class="inner-div">
<div class="box">
<label class="box-label">
<img src="https://img00.deviantart.net/f33c/i/2011/139/f/c/vertical_panorama_by_verticaldubai-d3gp1ja.jpg" alt="Image" />
<div class="overlay">
<div class="overlay-icon">
<i class="fa fa-hand-o-up"></i>
</div>
</div>
</label>
</div>
<div class="caption-box">
<label class="caption-label">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</label>
</div>
</div>

Menu not open when clicking open button

I have one problem with my menu.
This is the problem DEMO from codepen.io
In this demo you can see there is a left sidebar menu area. When you change the browser size width < 1050px then the menu opacity:0; and the button will showing on top left side (blue button).
The problem is left sidebar not opening when i click the button. The working example is here without css media screen.
Working DEMO without css media screen
Here is a code:
HTML
<div class="header-left">
Change browser size width < 1050px
<div class="menu-area">
<div class="icon-header-home-menu menu-show-hide">Click to Show Button now</div>
<div class="menu-area-wrap ">
<div class="menu-item-info">MENU AREA</div>
</div>
</div>
</div>
CSS
.header-left{
float: left;
width: 50%;
background-color:black;
color:#ffffff;
padding:10px;
}
.menu-area {
float: left;
}
.icon-header-home-menu {
margin: 0;
padding: 4px 0px 0px 0px;
margin-left: 5px;
width: 100%;
color: #ffffff;
overflow: hidden;
float: left;
font-size: 25px;
background-color:blue;
}
.menu-area-wrap {
position: absolute;
width: 230px;
height: 800px;
top: 42px;
left: 52px;
background-color:red;
}
.menu-item-info {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding-top: 20px;
background-color:green;
}
.menu-area-wrap.active {
opacity:1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
.menu-show-hide{
display:none;
}
#media all and (max-width: 1050px) {
.menu-show-hide {
display:block;
}
.menu-area-wrap{
position: absolute;
top: 42px;
left:0; /*changed here*/
width:100%; /*changed here*/
z-index: 1000;
font-size: 14px;
text-align: left;
background: #009688;
background-clip: padding-box;
-webkit-transition: all 0.2s ease;
display:none;
-webkit-transform-origin: left top 0px;
-webkit-transform: scale(0);
opacity:0;
}
}
JS
$('html').click(function() {
$('.menu-area-wrap').removeClass("active");
});
$(".icon-header-home-menu").click (function(e){
e.stopPropagation();
$('.menu-area-wrap').toggleClass("active");
});
$('.menu-area-wrap').click (function(e){
e.stopPropagation();
});
Try this inside your media screen:
.menu-area-wrap.active {
display: block;
}
Your media screen has display: none while your active class doesn't have display:block.
So, in desktop you were changing opacity but in mobile you are changing displays, therefore, your active class won't do anything because it still has display:none overwriting your opacity: 0.
$('html').click(function() {
$('.menu-area-wrap').removeClass("active");
});
$(".tt").click(function(e) {
e.stopPropagation();
$('.menu-area-wrap').toggleClass("active");
});
$('.menu-area-wrap').click(function(e) {
e.stopPropagation();
});
.header-left {
float: left;
width: 50%;
background-color: black;
color: #ffffff;
padding: 10px;
}
.menu-area {
float: left;
}
.icon-header-home-menu {
margin: 0;
padding: 4px 0px 0px 0px;
margin-left: 5px;
width: 100%;
color: #ffffff;
overflow: hidden;
float: left;
font-size: 25px;
background-color: blue;
}
.menu-area-wrap {
position: absolute;
width: 230px;
height: 800px;
top: 42px;
left: 52px;
background-color: red;
}
.menu-item-info {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding-top: 20px;
background-color: green;
}
.menu-area-wrap.active {
opacity: 1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
.menu-show-hide {
display: none;
}
#media all and (max-width: 1050px) {
.menu-show-hide {
display: block;
}
.menu-area-wrap.active {
display: block;
}
.menu-area-wrap {
position: absolute;
top: 42px;
left: 0;
/*changed here*/
width: 100%;
/*changed here*/
z-index: 1000;
font-size: 14px;
text-align: left;
background: #009688;
background-clip: padding-box;
-webkit-transition: all 0.2s ease;
display: none;
-webkit-transform-origin: left top 0px;
-webkit-transform: scale(0);
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-left">
Change browser size width
< 1050px <div class="menu-area">
<div class="icon-header-home-menu tt menu-show-hide">Click to Show Button now</div>
<div class="menu-area-wrap ">
<div class="menu-item-info">MENU AREA</div>
</div>
</div>
</div>
With animation:
Removed the display: none in mobile.
$('html').click(function() {
$('.menu-area-wrap').removeClass("active");
});
$(".tt").click(function(e) {
e.stopPropagation();
$('.menu-area-wrap').toggleClass("active");
});
$('.menu-area-wrap').click(function(e) {
e.stopPropagation();
});
.header-left {
float: left;
width: 50%;
background-color: black;
color: #ffffff;
padding: 10px;
}
.menu-area {
float: left;
}
.icon-header-home-menu {
margin: 0;
padding: 4px 0px 0px 0px;
margin-left: 5px;
width: 100%;
color: #ffffff;
overflow: hidden;
float: left;
font-size: 25px;
background-color: blue;
}
.menu-area-wrap {
position: absolute;
width: 230px;
height: 800px;
top: 42px;
left: 52px;
background-color: red;
}
.menu-item-info {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
padding-top: 20px;
background-color: green;
}
.menu-area-wrap.active {
opacity: 1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
.menu-show-hide {
display: none;
}
#media all and (max-width: 1050px) {
.menu-show-hide {
display: block;
}
.menu-area-wrap {
position: absolute;
top: 42px;
left: 0;
/*changed here*/
width: 100%;
/*changed here*/
z-index: 1000;
font-size: 14px;
text-align: left;
background: #009688;
background-clip: padding-box;
-webkit-transition: all 0.2s ease;
-webkit-transform-origin: left top 0px;
-webkit-transform: scale(0);
opacity: 0;
}
.menu-area-wrap.active {
opacity: 1;
-webkit-transform-origin: right top 0px;
-webkit-transform: scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-left">
Change browser size width
< 1050px <div class="menu-area">
<div class="icon-header-home-menu tt menu-show-hide">Click to Show Button now</div>
<div class="menu-area-wrap ">
<div class="menu-item-info">MENU AREA</div>
</div>
</div>
</div>

CSS3 circle with hover

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

Categories