first post on here!
I've been having issues when using the following codepen.
I tried putting the img inside an anchor tag to make the images of the carousel links to the pages I wanted, but when I do so it completely affects the way the pictures are displayed.
Here is what the carousel looks like when I add around img and change the code in the CSS replacing "img" by "a"
Here is what it looks like without the anchor tags
There might be a simple solution to this but I am a beginner hence my difficulty with this, would be more than grateful if anyone could help!
I have tried changing the CSS code, but I do not know if I need to change the js as well
var angle = 0;
function galleryspin(sign) {
spinner = document.querySelector("#spinner");
if (!sign) {
angle = angle + 45;
} else {
angle = angle - 45;
}
spinner.setAttribute("style", "-webkit-transform: rotateY(" + angle + "deg); -moz-transform: rotateY(" + angle + "deg); transform: rotateY(" + angle + "deg);");
}
div#carousel {
perspective: 1200px;
background: transparent;
padding-top: 5%;
font-size: 0;
margin-bottom: 3rem;
overflow: hidden;
}
figure#spinner {
transform-style: preserve-3d;
height: 400px;
transform-origin: 50% 50% -500px;
transition: 1s;
object-fit: contain;
}
figure#spinner img {
width: 40%;
max-width: 425px;
position: absolute;
left: 30%;
transform-origin: 50% 50% -500px;
outline: 1px solid transparent;
}
figure#spinner img:nth-child(1) {
transform: rotateY(0deg);
}
figure#spinner img:nth-child(2) {
transform: rotateY(45deg);
}
figure#spinner img:nth-child(3) {
transform: rotateY(90deg);
}
figure#spinner img:nth-child(4) {
transform: rotateY(135deg);
}
figure#spinner img:nth-child(5) {
transform: rotateY(180deg);
}
figure#spinner img:nth-child(6) {
transform: rotateY(225deg);
}
figure#spinner img:nth-child(7) {
transform: rotateY(270deg);
}
figure#spinner img:nth-child(8) {
transform: rotateY(315deg);
}
div#carousel~span {
color: #fff;
margin: 5%;
display: inline-block;
text-decoration: none;
font-size: 2rem;
transition: 0.6s color;
position: relative;
margin-top: -6rem;
border-bottom: none;
line-height: 0;
}
<div id="carousel">
<figure id="spinner">
<img src="./Resources/Images/weeks/week1.png" alt>
<img src="./Resources/Images/weeks/week2.png" alt>
<img src="./Resources/Images/weeks/week3.png" alt>
<img src="./Resources/Images/weeks/week4.png" alt>
<img src="./Resources/Images/weeks/week5.png" alt>
<img src="./Resources/Images/weeks/week6.png" alt>
<img src="./Resources/Images/weeks/week7.png" alt>
<img src="./Resources/Images/weeks/week8.png" alt>
</figure>
</div>
<span style="float:left" class="ss-icon" onclick="galleryspin('')"><</span>
<span style="float:right" class="ss-icon" onclick="galleryspin('-')">></span>
</div>
Related
There is a 2X2 grid container. I can not rotate container directly, I have to rotate these grids in such a way that It should look like I have rotated the container. Question: Rotate2
Look at this image, this is not a single image but 4. I want to rotate these images and result should be like I have rotated the main container Img
My solution:
Rotate the img1 with origin bottom-right, img2 with origin bottom-left, img3 with origin top-right and img4 with origin top-left, because this will make rotation along with center of container. image after rotating grids
.img1{
-webkit-transform: rotate(10deg);
-webkit-transform-origin: bottom right;
}
.img2{
-webkit-transform: rotate(10deg);
-webkit-transform-origin: bottom left;
}
.img3{
-webkit-transform: rotate(10deg);
-webkit-transform-origin: top right;
}
.img4{
-webkit-transform: rotate(10deg);
-webkit-transform-origin: top left;
}
This solution works as expected for 2x2 container, but what if container is 3x3 or 4x4, how can I find out the solution which will work for N x N grid? Question: Rotate3
Edit:
I am not able to explain the question properly. Here is question in simple form -
How to rotate the NxN grid along with center of container?
You actually just need to imagine where the origin is (which always has to be in the middle of the container), if let's say the grid is 2x2, the origin would be 1x the the first column and 1x of the first row. If the grid is 3x3, the origin would be 1.5x of the first column, and 1.5x of the first row. If the grid is 4x4, the origin would be 2x of the first column and 2x of the first row. And 1x = 100%, so 1.5x = 150%, and that's just the starting point, from that value, you can decrease it by 100% for each column and row.
3x3:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
padding: 60px;
}
.img {
background: blue;
width: 30%;
height: 200px;
border: 2px solid black;
box-sizing: border-box;
}
.img1 {
transform-origin: 150% 150%;
transform: rotate(45deg);
}
.img2 {
transform-origin: 50% 150%;
transform: rotate(45deg);
}
.img3 {
transform-origin: -50% 150%;
transform: rotate(45deg);
}
.img4 {
transform-origin: 150% 50%;
transform: rotate(45deg);
}
.img5 {
transform-origin: 50% 50%;
transform: rotate(45deg);
}
.img6 {
transform-origin: -50% 50%;
transform: rotate(45deg);
}
.img7 {
transform-origin: 150% -50%;
transform: rotate(45deg);
}
.img8 {
transform-origin: 50% -50%;
transform: rotate(45deg);
}
.img9 {
transform-origin: -50% -50%;
transform: rotate(45deg);
}
<div class="container">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
<div class="img img6"></div>
<div class="img img7"></div>
<div class="img img8"></div>
<div class="img img9"></div>
</div>
4x4
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
padding: 60px;
}
.img {
background: blue;
width: 25%;
height: 200px;
border: 2px solid black;
box-sizing: border-box;
}
.img1 {
transform-origin: 200% 200%;
transform: rotate(45deg);
}
.img2 {
transform-origin: 100% 200%;
transform: rotate(45deg);
}
.img3 {
transform-origin: 0% 200%;
transform: rotate(45deg);
}
.img4 {
transform-origin: -100% 200%;
transform: rotate(45deg);
}
.img5 {
transform-origin: 200% 100%;
transform: rotate(45deg);
}
.img6 {
transform-origin: 100% 100%;
transform: rotate(45deg);
}
.img7 {
transform-origin: 0% 100%;
transform: rotate(45deg);
}
.img8 {
transform-origin: -100% 100%;
transform: rotate(45deg);
}
.img9 {
transform-origin: 200% 0%;
transform: rotate(45deg);
}
.img10 {
transform-origin: 100% 0%;
transform: rotate(45deg);
}
.img11 {
transform-origin: 0% 0%;
transform: rotate(45deg);
}
.img12 {
transform-origin: -100% 0%;
transform: rotate(45deg);
}
.img13 {
transform-origin: 200% -100%;
transform: rotate(45deg);
}
.img14 {
transform-origin: 100% -100%;
transform: rotate(45deg);
}
.img15 {
transform-origin: 0% -100%;
transform: rotate(45deg);
}
.img16 {
transform-origin: -100% -100%;
transform: rotate(45deg);
}
<div class="container">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
<div class="img img6"></div>
<div class="img img7"></div>
<div class="img img8"></div>
<div class="img img9"></div>
<div class="img img10"></div>
<div class="img img11"></div>
<div class="img img12"></div>
<div class="img img13"></div>
<div class="img img14"></div>
<div class="img img15"></div>
<div class="img img16"></div>
</div>
NxN:
const generate = document.getElementById('generate');
const container = document.getElementById('container');
generate.addEventListener('click', () => {
const angle = document.getElementById('angle').value;
const n = document.getElementById('n').value;
container.innerHTML = "";
const initialPercentage = Math.floor(Number(n) / 2) * 100;
const width = 100 / Number(n);
let yPercentage = initialPercentage;
for (let i = 0; i < Number(n); i++) {
let xPercentage = initialPercentage;
for (let j = 0; j < Number(n); j++) {
const div = document.createElement("div");
div.classList.add("img");
div.style.width = `${width}%`;
div.style.paddingBottom = `${width}%`;
div.style.transform = `rotate(${angle}deg)`;
div.style.transformOrigin = `${xPercentage}% ${yPercentage}%`;
xPercentage -= 100;
container.appendChild(div);
}
yPercentage -= 100;
}
});
#container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
padding: 60px;
}
.img {
background: blue;
border: 2px solid black;
box-sizing: border-box;
}
<input id="angle" type="number" placeholder="angle" />
<input id="n" type="number" placeholder="N" />
<button id="generate">generate</button>
<div id="container">
</div>
If my explanation was so hard to understand, you could see the pattern from the snippet I provided above.
I am trying to create a function with jQuery but I can't. When you press a button then an arrow will move to 36 degrees. I have 5 buttons and the circle is 180 degrees.
My code is working in one way but it's not in reverse, which means when you press button 1 to 5 it's working but when I try to click randomly then it is not working.
Here is what i am trying to build
$(document).ready(function() {
$("#ang36").click(function() {
$("#silder_image").removeClass("animate1");
$("#silder_image").addClass("animate1");
});
$("#ang72").click(function() {
$("#silder_image").removeClass("animate2");
$("#silder_image").addClass("animate2");
});
$("#ang108").click(function() {
$("#silder_image").removeClass("animate3");
$("#silder_image").addClass("animate3");
});
$("#ang144").click(function() {
$("#silder_image").removeClass("animate4");
$("#silder_image").addClass("animate4");
});
$("#ang180").click(function() {
$("#silder_image").removeClass("animate5");
$("#silder_image").addClass("animate5");
});
});
.slider_area {
width: 800px;
margin: 0 auto;
position: relative;
margin-top: 400px;
}
.silder_image {
width: 100px;
height: 100px;
}
.animate1 {
transform: rotate(36deg);
-ms-transform: rotate(36deg);
-webkit-transform: rotate(36deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate1 img,
.animate2 img,
.animate3 img,
.animate4 img,
.animate5 img {
transform: rotate(-90deg);
}
.animate2 {
transform: rotate(72deg);
-ms-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate3 {
transform: rotate(108deg);
-ms-transform: rotate(108deg);
-webkit-transform: rotate(108deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate4 {
transform: rotate(144deg);
-ms-transform: rotate(144deg);
-webkit-transform: rotate(144deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate5 {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform-origin: center center;
transition-duration: 5s;
}
.triggrs {
position: relative;
width: 400px;
bottom: -171px;
left: 0;
}
<div class="slider_area">
<div id="silder_image">
<img src="Slider Vote.png" alt="">
</div>
<div class="triggrs">
<button id="ang36">button1</button>
<button id="ang72">button2</button>
<button id="ang108">button3</button>
<button id="ang144">button4</button>
<button id="ang180">button5</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I created another approach which could also help you further (maybe).
let needle = document.querySelector('#needle ');
let btns = document.querySelectorAll('button')
btns.forEach( btn=>{ btn.addEventListener('click', function() {
let level = this.dataset.deg;
needle.style.transform = "rotate("+Number(level)+"deg)"});
})
#panel {
height: 50px;
overflow: hidden;
}
.circle{
width: 100px;
height: 100px;
border-radius: 100%;
border: 5px solid grey;
position: relative;
display: flex;
justify-content: center;
transform: rotate(-90deg);
background: #ffffff;
background: linear-gradient(to bottom, #ffffff 0%,#e8e000 50%,#e50000 100%);
}
#needle {
width: 6px;
height: 50px;
background: #4361ff;
transform-origin: bottom;
transition: transform .75s cubic-bezier(.31,-0.52,.84,1.55);
transform: rotate(30deg);
box-sizing: border-box;
margin-left: -3px;
}
.buttons {
margin-top: 2rem;
}
<div id="panel">
<div class="circle">
<div id="needle"></div>
</div>
</div>
<div class="buttons">
<button data-deg="30">1</button>
<button data-deg="60">2</button>
<button data-deg="90">3</button>
<button data-deg="120">4</button>
<button data-deg="150">5</button>
</div>
i'm trying to get clickable icons and they work but when I added some stuff they stopped working. When I click on them they do not do anything like they used too
I've tried switching up the CSS and HTML and rearranging it as well as removing some CSS but the icons still wont work when clicked.
HTML
<div id="star" class="video mask overlay"><canvas class="cover"></canvas></div>
<section id="home" class="home">
<script src="zzz/js/jquery.js"></script>
<script src="zzz/js/bootstrap.min.js"></script>
<script src="zzz/js/modernizr.custom.js"></script>
<script src="zzz/js/plugins.min.js"></script>
<script src="zzz/js/main.js"></script>
</head>
<body scroll="no" style="overflow: hidden">
<body>
<div class="textglitch">
<a class="textglitch-link"><span>Elf</span></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="function.js"></script>
<div class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<div>
</a>
</body>
CSS
* {
margin:0;
padding:0;
outline:none;
list-style:none;
text-decoration:none;
box-sizing:border-box;
color:#000;
background: transparent;
border:none;
}
html, body {
height: 100%;
width: 100%;
margin-top: 10%;
}
body {
background: #111;
font-family: 'Roboto', sans-serif;
}
.textglitch {
position: relative;
text-align: center;
margin: 0 auto;
cursor: pointer;
z-index: 1;
font-size: 5vw;
font-weight: 700;
margin: 50px 0;
}
.textglitch .textglitch-link {
position: relative;
display: inline-block;
}
.textglitch-link span {
position: relative;
z-index: 2;
color: #fff;
}
.blur {
filter: blur(1px);
-webkit-filter: blur(1px);
}
.textglitch .textglitch-link:after,
.textglitch .textglitch-link:before {
position: absolute;
top: 0px;
left: 0px;
content: attr(data-content);
visibility: hidden;
}
.textglitch.active .textglitch-link:after,
.textglitch.active .textglitch-link:before {
visibility: visible;
}
.textglitch .textglitch-link:before {
color: rgba(255, 0, 188, 0.8);
-webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
}
.textglitch .textglitch-link:after {
color: rgba(0,255,255,0.8);
-webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
}
#keyframes textglitch {
0% {
-webkit-transform: translate(0);
transform: translate(0)
}
20% {
-webkit-transform: translate(-3px, 3px);
transform: translate(-3px, 3px)
}
40% {
-webkit-transform: translate(-3px, -3px);
transform: translate(-3px, -3px)
}
60% {
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px)
}
80% {
-webkit-transform: translate(3px, -3px);
transform: translate(3px, -3px)
}
to {
-webkit-transform: translate(0);
transform: translate(0)
}
}
.gg {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
div.gg {
margin: 0 auto;
width: 120em;
}
.cover{
background:none !important;
}
.cover,
.image,
.video,
.video-fallback {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
I wanted it to be when I clicked it it would open a new tab and go to the page.
The added
I've added the But it is still unclickable.
doesn't work
You need to do this:
<img src="source"/>
Basically you need to enclose the image within the tags!
I'm looking for information.
Does someone ever heard about this kinda add?
I'm trying programming an add which opening itself when you click on it, but I'm stuck.
I found a solution if you wanna an opening style add like 2 distributed parts but not for 3 or more side, so if it's possible, so someone can help me find out how can I solve this problem?
This is the html file
I tried the 3rd "distribution" but that stucked under the 2nd so I deleted that part of the code.
.cards {
width: 300px;
height: 600px;
margin: auto auto;
}
.card-toggle {
display: none;
}
.card {
display: block;
width: 180px;
height: 180px;
position: relative;
-webkit-perspective: 900;
margin: auto auto;
cursor: pointer;
}
.card:hover .face {
-webkit-transition: all 0.3s ease-out;
margin: auto auto;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transition: all 0.5s ease-out;
-webkit-transform-origin: 0 0;
}
.front {
-webkit-transform: rotateY(0deg);
z-index: auto;
-webkit-backface-visibility: hidden;
}
.inner-left {
-webkit-transform: rotateY(-10deg);
z-index: 2;
}
.inner-left>img {
-webkit-transform: rotateY(180deg);
}
.inner-right {
-webkit-transform: rotateY(0deg);
z-index: 1;
}
.card:hover .front,
.card:hover .inner-left {
-webkit-transform: rotateY(-15deg);
}
.card-toggle:checked+.card .front,
.card-toggle:checked+.card .inner-left {
-webkit-transform: rotateY(-180deg);
}
.card-toggle:checked+.card .inner-right {
-webkit-transform: rotateY(0deg);
}
<div class='cards'>
<input type="checkbox" id="card-toggle" class="card-toggle" value="selected">
<label class='card' for="card-toggle">
<div class='front face'>
Font view of the advertisement.
</div>
<div class="inner-left face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
<div class="inner-right face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
</label>
</div>
This version makes it open more like a book:
.cards {
width: 300px;
height: 600px;
margin: auto auto;
}
.card-toggle {
display: none;
}
.card {
display: block;
width: 180px;
height: 180px;
position: relative;
perspective: 900;
margin: auto auto;
cursor: pointer;
}
.card:hover .face {
transition: all 0.3s ease-out;
margin: auto auto;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transition: all 0.5s ease-out;
-webkit-transform-origin: 0 0;
}
.front {
/*-webkit-transform: rotateY(180deg);*/
z-index: auto;
-webkit-backface-visibility: hidden;
}
.inner-left {
/*-webkit-transform: rotateY(-180deg);*/
z-index: 2;
}
.inner-left>img {
/*-webkit-transform: rotateY(180deg);*/
}
.inner-right {
/*-webkit-transform: rotateY(180deg);*/
z-index: 1;
}
.card:hover .front,
.card:hover .inner-left {
transform: rotateY(180deg);
}
.card-toggle:checked+.card .front,
.card-toggle:checked+.card .inner-left {
transform: rotateY(180deg);
}
.card-toggle:checked+.card .inner-right {
transform: rotateY(-180deg);
}
<div class='cards'>
<input type="checkbox" id="card-toggle" class="card-toggle" value="selected">
<label class='card' for="card-toggle">
<div class='front face'>
Front view of the advertisement.
</div>
<div class="inner-left face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
<div class="inner-right face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
</label>
</div>
I have been trying this for a lot of time. How can I add a bigger text box on the top of the page ie it would be outside the div tag of the button which would be clicked
https://jsfiddle.net/Lx3rtLx0/2/
For eg on clicking one of the four emerging images it should display
a text box on the top of the page like the one shown below
I want the code given to arrive on the page on clicking one of the images. I.e. when you click on one of the images(jsfiddle) ..a text box(code given) should appear. on different clicks diff content.
#adbox {
width: 800px;
height: 150px;
border-width: 0;
border-color: red;
background-color:grey;
}
#adbox .adbox1 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:left;
background-color:lightblue;
margin:0px 0px 0px 300px;
}
#adbox .adbox2 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:right;
background-color:red;
margin:0px 60px 0px 0px;
}
.clear{
clear:both;
}
<!DOCTYPE html>
<html>
<head>
<title>BOX</title>
</head>
<body>
<div align=center><div id="adbox">
<h1><br> xyz sent you a hug</br></h1>
<div class="adbox1">
<br>Send a Hug Back</br>
</div>
<div class="adbox2">
<br>Ack | Dis</br>
</div>
<div class="clear"/>
</div></div>
</body>
</html>
Not super clear on your question, do you need to add an input to the jsfiddle in your question? or the code you have listed in your question? If it is in the jsfiddle, just add this to the top of the code:
<body>
<section id="header">
<div class="inner">
<div>
<input type="text" style="position:absolute; width:300px;" />
</div>
Otherwise, the attribute position:absolute should work out for you, if it isn't in the right place, add attributes like top:0; left:0, and that will put your input in the top left despite anything else in your code.
Simple, on your click button add the code as in https://jsfiddle.net/Lx3rtLx0/6/
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
So the full JS become
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
});
});
You can use a data- attribute on your clickable divs to link them with a specific element (a textbox in this case). For example:
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
In the click handler, we can retreive this attribute and show the element with id adbox1.
Full example:
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
});
$(".btn.btn-icon").click(function() {
$('.adbox').hide();
$('#' + $(this).data('adbox')).show();
});
$('.adbox').click(function() {
$(this).hide();
});
});
html,
body {
height: 100%;
overflow: hidden;
}
.absolute-center,
.menu,
.menu .btn .fa,
.menu .btn.trigger .line {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu {
width: 5em;
height: 5em;
}
.menu .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, transform 1s;
transition: opacity 2s, z-index 1s, transform 1s, -webkit-transform 1s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
content: url("http://i.stack.imgur.com/Yse7Q.jpg");
}
.menu .btn.trigger:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.menu .rotater {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon {
opacity: 1;
z-index: 50;
}
.rotater:nth-child(1) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
-webkit-transform: translateY(-12em) rotate(45deg);
transform: translateY(-12em) rotate(45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-45deg);
transform: translateY(-12em) rotate(-45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(3) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-135deg);
transform: translateY(-12em) rotate(-135deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(4) {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.text-box {
text-align: center;
z-index: 3;
font-size: 18px;
font-weight: 900;
color: white;
padding-top: 30px;
opacity: 0;
-webkit-transition: all 0.5s ease;
/* Safari */
transition: all 0.5s ease;
}
.text-box:hover {
opacity: 1;
}
.adbox {
display: none;
position: absolute;
top: 10px;
width: 120px;
left: 50%;
margin-left: -70px;
background: grey;
padding: 10px;
color: white;
text-align: center;
border-radius: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="inner">
<div class="menu">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="icons">
<div class="rotater">
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
<p class="text-box">
Hello
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Send a kiss to Margaret" data-adbox="adbox2">
<p class="text-box">
This
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Wish Good Morning to your Family" data-adbox="adbox3">
<p class="text-box">
Doge
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon " title="Express your love" data-adbox="adbox4">
<p class="text-box">
Is
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="adbox" id="adbox1">
<h1>xyz sent you a hug</h1>
</div>
<div class="adbox" id="adbox2">
<h1>Send a Hug Back</h1>
</div>
<div class="adbox" id="adbox3">
<h1>Ack | Dis</h1>
</div>
<div class="adbox" id="adbox4">
</div>