I want to display the overlay for different links. 1st overlay has an image and text whereas if we click link2 it must display overlay2 having same structure but diff content. Please help me get the desired output.
function on() {
document.getElementById("overlay").style.display = "block";
}
function on1() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
.img {
transition: transform 5s ease-in-out;
transform: scale(1);
transform-origin: 0 0;
}
.img:hover {
transform: scale(1.25)
}
#overlay,
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
z-index: 77777772;
cursor: pointer;
}
#text,
#text1 {
position: fixed;
top: 20%;
left: 5%;
//font-size: 50px;
color: black;
// transform: translate(-50%,-50%);
// -ms-transform: translate(-50%,-50%);
}
<div id="overlay" onclick="off()">
<div id="text">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on()"></a>
</div>
<div id="overlay1" onclick="on1()">
<div id="text1">
<div style="width: 48%; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on1()"></a>
</div>
</div>
</div>
<a onclick="on(id)"style="font-size: 11pt;">Read More -></a>
<a onclick="on(id)"style="font-size: 11pt;">Read More -></a>
1. List item
There are better ways to achieve this, however as per your requirement you may pass different ids &actions as params to same function like so
function on() {
document.getElementById("overlay").style.display = "block";
}
function on1() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
function toggle(id, value) {
document.getElementById(id).style.display = value;
}
.img {
transition: transform 5s ease-in-out;
transform: scale(1);
transform-origin: 0 0;
}
.img:hover {
transform: scale(1.25)
}
#overlay,
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
z-index: 77777772;
cursor: pointer;
}
#text,
#text1 {
position: fixed;
top: 20%;
left: 5%;
font-size: 50px;
color: black;
transform: translate(-50% -50%);
-ms-transform: translate(-50% -50%);
}
<div id="overlay" onclick="toggle('overlay', 'none')">
<div id="text">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="toggle('overlay', 'block')"></a>
</div>
<div id="overlay1" onclick="toggle('overlay1', 'block')">
<div id="text1">
<div style="width: 48%; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="toggle('overlay1', 'block')"></a>
</div>
</div>
</div>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">Read More -></a>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">Read More -></a> 1. List item
Related
i have problem like this
dropdown-menu covered
btw it isn't covered by other div, but dropdown-menu can't be out of the navbar, if i can ilustrate this it can be like this
ilustration of the navbar and dropdown-men
i make the navbar native with this code
<div id="topnav" class="topnav close-sidebar">
<div class="col d-inline">
<a href="#" onclick="sidebarToggle()">
<i class="fa-solid fa-bars"></i>
</a>
<p class="mt-1" style="text-align: left; font: normal normal normal 14px/17px Helvetica; letter-spacing: 0.34px;"><%: DateTime.Now.ToString("dddd, dd MMMM yyyy") %></p>
</div>
<div class="form-inline mr-5" style="max-width: 350px;">
<div class="d-inline">
<img class="mb-3" src="<%=Page.ResolveClientUrl("~/Assets/img/Worklist/atom-button-header-a-button-header-icon.svg")%>" alt="Alternate Text" />
</div>
<div class="d-inline mb-3">
<img style="height: 24px;" class="" src="<%=Page.ResolveClientUrl("~/Assets/img/Worklist/atom-icon-a-icon-globe.svg")%>" alt="Alternate Text" />
</div>
<div class="d-inline mb-3">
<div id="en" class="">EN</div>
</div>
<div class="d-inline" style="max-width: 250px;">
<div id="profile" class="text-right mb-3 ml-4" style="max-width: 250px; width: 150px;">
<div class="dropdown">
<div style="cursor: pointer;" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-inline">
<img style="height: 32px; width: 32px;" src="<%= Page.ResolveClientUrl("~/Assets/img/Worklist/img_avatar.png") %>" class="img-fluid mr-2 rounded-circle" alt="Responsive image" />
</div>
<div class="d-inline">
Nama User
</div>
<div class="d-inline">
<img src="<%= Page.ResolveClientUrl("~/Assets/img/Worklist/atom-icon-a-icon-angle-down.svg") %>" alt="Text" />
</div>
</div>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="opacity: 1 !important; z-index: 99;">
<a class="dropdown-item" href="#">Logout</a>
</div>
</div>
</div>
</div>
</div>
</div>
and the css of is like this
.topnav {
top: 0;
overflow: hidden;
height: 56px;
background: #1D2567 0% 0% no-repeat padding-box;
opacity: 1;
display: flex;
}
.close-sidebar {
margin-left: 56px;
}
for the dropdown-menu i used boostrap 4.3.1
when i inspect the web, the css is like this
css inspect 1
css inspect 2
css inspect 3
css inspect 4
Update:
i try to see my z-index using 3d view in ms edge, and the dropdown-menu is already in front of the navbar, but on the website it is covered
3D View
set position relative to parent or container and set position absolute to child elements. try to change overflow
.topnav {
top: 0;
overflow: hidden; // try to change this not hidden
height: 56px;
background: #1D2567 0% 0% no-repeat padding-box;
opacity: 1;
display: flex;
position: relative; // parent}
.close-sidebar {
margin-left: 56px;
position: absolute; // child};
if dont work let us to know and type more describe. thank you
You can try
.topnav {
top: 0;
overflow: hidden;
height: 56px;
background: #1D2567 0% 0% no-repeat padding-box;
opacity: 1;
display: flex;
position: relative;
}
.close-sidebar {
margin-left: 56px;
position: absolute;
z-index: 10;
}
This should work. Let us know if this doesn't
Try using this
.topnav {
top: 0;
overflow: hidden;
height: 56px;
background: #1D2567 0% 0% no-repeat padding-box;
opacity: 1;
display: flex;
z-index: 999;
}
.close-sidebar {
margin-left: 56px;
}
I am having some Issues with how my images are aligned on my website.
1. I would the images to have equal spacing from the left and the right, meaning centered because currently as you make the browser smaller the right side is a lot bigger than the left.
2. Also as I make the browser smaller the page realigns nice, but when I view it on a mobile device it is very different.
You can find my code at https://codepen.io/anon/pen/mpKvMx
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
h1 {
color: red;
}
h2 {
color:red;
}
p {
font-family: Arial;
}
body {
background-color: grey;
}
div {
text-align: justify;
}
div img {
display: inline-block;
width: auto;
max-height: 200px;
height: auto;
}
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
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%);
}
.dl {
margin-top: 400px;
}
<html>
<title>Title</title>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<h1 align=center>Heading</h1>
<h2 align=center>Sub-Heading</h2>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<input type="text" id="myinput" name="search" placeholder="Search.." style="border-radius: 4px;">
</head>
<br>
<br>
<body>
<div class="image123">
<div class="imgContainer">
<img src="https://i.warosu.org/data/biz/img/0063/87/1515861781137.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/ETHEREUM-YOUTUBE-PROFILE-PIC.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="https://www.profitconfidential.com/wp-content/uploads/2018/11/ripple-icon-1-300x300.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/omisego.png" alt="OmiseGo"><div class="overlay"><div class="text">OmiseGO</div></div>
</div>
</div><br>
</body>
</html>
1) All you need is to add the following css to the element you want to align horizontally: margin: 0 auto;
2) Use media queries, so for example you can have:
on mobile: all the images stacked (you may need width:100% on your image container)
for wider viewports: images inlined as in your code sample
If you are not confortable with media queries please see the following example: https://codepen.io/TrentWalton/pen/kqxDy.
Blockquote
Hi All, Please is it possible to add a Zoom in, Zoom out functionality to this code? I'm very fresh to html. Any help will be appreciated.
<div class="sl-block" data-block-type="text" style="width: 413px; left: 29px; top: 84px; height: auto;" data-block-id="a3e059aa2efde6bb395d96de758538ef">
<div class="sl-block-content" data-placeholder-tag="h2" data-placeholder-text="Title Text" style="text-align: left; z-index: 11;">
<h2>
<span style="font-size:0.7em">Career Center Floor</span>
</h2>
</div>
</div>
<div class="sl-block" data-block-type="text" style="width: 413px; left: 29px; top: 231px; height: auto;" data-block-id="9d9bce75d195e9e223f5d8542e6441da">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat." style="z-index: 13; text-align: left;">
<ol>
<li class="">
<span style="font-size:0.9em">Clients first come in contact with career coaches when they walk into the Career Center. </span>
</li>
<li class="">
<span style="font-size:0.9em">If they would love to use the computer, we confirm their information and provide them with their login credentials. </span>
</li>
</ol>
</div>
</div>
<div class="sl-block" data-block-type="image" style="width: 492px; height: 277px; left: 466px; top: 84px;" data-block-id="a7d2425befcc101a308007e77988f4af">
<div class="sl-block-style" style="z-index: 12; transform: rotate(180deg);">
<div class="sl-block-content" style="z-index: 12; border-style: solid; border-width: 1px;">
<img style="" data-natural-width="2400" data-natural-height="1350" data-lazy-loaded="" src="https://s3.amazonaws.com/media-p.slid.es/uploads/762662/images/4156874/20170915_130043.jpg"/>
</div>
</div>
</div>
<div class="sl-block" data-block-type="text" data-block-id="a67966971a44247acc6d3c39c8e58444" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: -134px; top: 35px;">
<div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;">
<p>Station # 1</p>
</div>
</div>
<div class="sl-block" data-block-type="image" data-block-id="a4223a242dc9a0bf9f41eca2258369d3" style="min-width: 30px; min-height: 30px; width: 486px; height: 322px; left: 466px; top: 360px;">
<div class="sl-block-content" style="z-index: 15;">
<img data-natural-width="584" data-natural-height="387" style="" data-lazy-loaded="" src="https://s3.amazonaws.com/media-p.slid.es/uploads/762662/images/4156885/f2c375d99f7def3cdccbec0cc2537cb1.jpg"/>
</div>
</div>
Blockquote
Depending on your expected behaviour, you can use simple css transform function scale().
In your example, you can use images instead div in my example
.square {
width: 50px;
height: 50px;
border: 1px solid black;
display: inline-block;
margin: 20px;
transition: transform 0.5s;
}
.square:hover {
transform: scale(1.2);
}
.image1 {
background: black;
}
.image2 {
background: white;
}
.image3 {
background: red;
}
.image4 {
background: green;
}
<div class="square image1"></div>
<div class="square image2"></div>
<div class="square image3"></div>
<div class="square image4"></div>
var imagesize = $('img').width();
$('.zoomout').on('click', function(){
imagesize = imagesize - 5;
$('img').width(imagesize);
});
$('.zoomin').on('click', function(){
imagesize = imagesize + 5;
$('img').width(imagesize);
});
div {height:150px; width:150px; display:block; overflow:hidden; outline: 2px solid #777777; padding:20px;}
img {width:150px;}
button {font-size:10px; margin:10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_bKbC-4AX-6mG9oeROWNuXK4bKwhYloqxKqKSyiBH58lyuV8-Xg"/></div>
<button class="zoomout">Zoom Out</button > <button class="zoomin">Zoom In</button >
I have code below for a content slider using HTML, CSS and JQuery. Is it possible to get exactly what I have now but using pure CSS only? If its not possible with pure CSS is it possible to do with Vanilla JavaScript with no JQuery? Anything helps, cheers.
$(function(){
var scroller = $('#scroller div.innerScrollArea');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function(){
var $this = $(this);
$this.css('left', curX);
curX += $this.outerWidth(true);
});
var fullW = curX / 2;
var viewportW = scroller.width();
// Scrolling speed management
var controller = {curSpeed:0, fullSpeed:2};
var $controller = $(controller);
var tweenToNewSpeed = function(newSpeed, duration)
{
if (duration === undefined)
duration = 600;
$controller.stop(true).animate({curSpeed:newSpeed}, duration);
};
// Pause on hover
scroller.hover(function(){
tweenToNewSpeed(0);
}, function(){
tweenToNewSpeed(controller.fullSpeed);
});
// Scrolling management; start the automatical scrolling
var doScroll = function()
{
var curX = scroller.scrollLeft();
var newX = curX + controller.curSpeed;
if (newX > fullW*2 - viewportW)
newX -= fullW;
scroller.scrollLeft(newX);
};
setInterval(doScroll, 40);
tweenToNewSpeed(controller.fullSpeed);
});
#scroller {
position: absolute;
}
#scroller .innerScrollArea {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#scroller ul {
padding: 0;
position: relative;
}
#scroller li {
padding: 0;
list-style-type: none;
position: absolute;
}
.circle {
width: 250px;
height: 250px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:9px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 20.5px;
text-align: center;
width: 200px;
top: 90px;
left: 10%;
bottom: 0;
position: absolute;
z-index: 99;
}
.arrow {
width:300px;
height:80px;
}
.flipimage {
width:300px;
height:80px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
.everything {
/*transform: scale(0.6);
}
<div class="everything">
<div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<li>
<br style="line-height:89px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
You may use animation , but to keep the whole thing sliding for ever, you will need to clone (or make a redundant copy in HTML) at least of the elements that you see at first in the slider . Else, it would behave as a marquee , living a blank space untill everything slides off the box.
Example below:
/* all position:absolute removed */
#scroller {
overflow:hidden;
}
#scroller .innerScrollArea {
}
#scroller ul {
padding: 0;
position: relative;
display:flex;/* UPDATE */
}
#scroller li {
padding: 0;
list-style-type: none;
}
.circle {
width: 250px;
height: 250px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:9px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 20.5px;
text-align: center;
width: 200px;
top: 90px;
left: 10%;
bottom: 0;
position: absolute;
z-index: 99;
}
.arrow {
width:300px;
height:80px;
}
.flipimage {
width:300px;
height:80px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
/* UPDATE for animation */
ul {
animation: slidli 9s infinite linear;
}
ul:hover {
animation-play-state:paused;
}
#keyframes slidli {
100% {
transform:translatex(-133.5%);/* this is to be update to the content with to see every element slide once untill copies/clone comes back at same spot */
}
}
<div class="everything">
<div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<!-- from here it is a copy of the previous elements . 3 of them might have been enough -->
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
Notice: I used the flex model and droppped the absolute positionning. Main parent can be in absolute if you do need it, children do not.
I have created the application where All divs are Flip Vertically on hover. I wanted to make it random without hover. How should I do that?
.vertical.flip-container {
position: relative;
float: left;
margin-left: 50px;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 50px;
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 100px;
height: 100px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
Any suggestions would be thankful.
I simplified your markup and CSS quite a bit. Also gave it a more 3D look.
You can use setInterval to flip them hover:
http://jsfiddle.net/7x75466y/5/
var $flippers = $(".flip-container"),
qtFlippers = $flippers.length;
setInterval(function () {
$flippers.eq(Math.floor(Math.random()*qtFlippers)).toggleClass('hover');
}, 1000);
Here is a JSfiddle that selects a random tile, and applies an action to it at every second (using setTimeout). You can perform whatever action you like on the tile. Using jQuery
http://jsfiddle.net/7x75466y/2/
var containers = $(".flip-container")
setInterval(function() {
var target = containers.eq(Math.floor(Math.random() * containers.size()))
target.fadeToggle() //DO WHAT YOU WANT TO THE TARGET
}, 1000)