Position text centered on top of image - javascript

I'm creating a navigation bar where, initially, you have images. Upon hovering over them, the image's opacity goes down to 0 and text's goes up to 1. So the text should replace the image.
I have done so, but the problem I'm trying to solve is to position text on top of the image centered both horizontally and vertically.
Only the first one of the list has CSS applied, thought I would figure out on one element first and then apply solution to the rest later.
Here's my codepen: https://codepen.io/Cryptooo/pen/NWGwQwv
.menu-icons li {
margin-top: 50%;
}
.menu-icons {
display: flex;
flex-direction: column;
align-items: center;
}
.menu-center {
display: flex;
flex-direction: column;
align-items: center;
}
#home {
height: 25px;
width: 27px;
}
.menu-center #home,
.menu-center .home-txt {
transition: opacity 0.3s ease-in-out;
}
.menu-center .home-txt {
position: absolute;
color: #08efcc;
opacity: 0;
}
.menu-center:hover #home {
opacity: 0;
}
.menu-center:hover .home-txt {
opacity: 1;
}
<nav class="menu-section">
<ul class="menu-icons">
<div class="menu-center">
<li>
<img id="home" src="/Images/Home.png">
</li>
<div class="home-txt">Home</div>
</div>
<div class="menu-center">
<li>
<img id="about" src="/Images/About.png">
</li>
<div class="about-txt">About</div>
</div>
<div class="menu-center">
<li>
<img id="skills" src="/Images/Skills.png">
</li>
<div class="skills-txt">Skills</div>
</div>
<div class="menu-center">
<li>
<img id="work" src="/Images/Work.png">
</li>
<div class="work-txt">Work</div>
</div>
<div class="menu-center">
<li>
<img id="contact" src="/Images/Contact.png">
</li>
<div class="contact-txt">Contact</div>
</div>
</ul>
</nav>

Here is how it works for me, assuming I understand your question!
.menu-icons li {
margin-top: 50%;
list-style-type: none;
}
.menu-icons {
display: flex;
flex-direction: column;
align-items: center;
}
.menu-center {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
#home {
height: 25px;
width: 27px;
}
.menu-center #home,
.menu-center .home-txt {
transition: opacity 0.3s ease-in-out;
}
.menu-center .home-txt {
position: absolute;
left: 0;
width: 100%;
top: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #08efcc;
opacity: 0;
}
.menu-center:hover #home {
opacity: 0;
}
.menu-center:hover .home-txt {
opacity: 1;
}
<nav class="menu-section">
<ul class="menu-icons">
<div class="menu-center">
<li>
<img id="home" src="/Images/Home.png">
</li>
<div class="home-txt">Home</div>
</div>
<div class="menu-center">
<li>
<img id="about" src="/Images/About.png">
</li>
<div class="about-txt">About</div>
</div>
<div class="menu-center">
<li>
<img id="skills" src="/Images/Skills.png">
</li>
<div class="skills-txt">Skills</div>
</div>
<div class="menu-center">
<li>
<img id="work" src="/Images/Work.png">
</li>
<div class="work-txt">Work</div>
</div>
<div class="menu-center">
<li>
<img id="contact" src="/Images/Contact.png">
</li>
<div class="contact-txt">Contact</div>
</div>
</ul>
</nav>

Related

How can I position an element at the bottom of the page?

I'm working on my portfolio website and I'm not that good with CSS as of now this social bar is coming like this in between and I want it to go down like the bottom of the page
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
.social {
/* //position my socials to bottom left */
position: absolute;
scale: 0.09;
bottom: 0;
left: 0;
margin-top: 100%;
margin-left: 40px;
width: 0%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
.social li {
list-style: none;
}
.social li a {
display: inline-block;
margin-left: 40px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover {
transform: scale(0.65) translateY(-15px);
}
<body>
<section class="showcase">
<header>
<h2 class="logo">
EAzZY/Madhur</h2>
<div class="toggle"></div>
</header>
<video src="pexels-rostislav-uzunov-7513671.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>👋 I am Madhur</h2>
</div>
<ul class="social">
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
<li>
<img src="https://via.placeholder.com/48">
</li>
</ul>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<section id="home"></section>
<section id="about">
<h1>about</h1>
</section>
<section id="contact">
<h1>contact</h1>
</section>
</body>
So without seeing your html I don't know how exactly where your social media bar is. I see you are using absolute positioning which can get goofy if the parent container it is in is not 100% height of the window. Which may be happening here. See my example below. If you want it to sit at the bottom of the screen and the screen does not scroll you will have to make the parent container the height of the screen.
.full-height {
width: 100%;
height: 100vh;
background-color: black;
overflow-x: hidden;
position: relative;
}
.social {
width: 200px;
height: 50px;
background-color: blue;
position: absolute;
bottom: 20px;
left: 20px;
}
<div class="full-height">
<ul class="social"> </ul>
<div>
It would be better to have your html code as well. But assuming the situation, I guess it might be like this:
<div class="container">
<ul class="social">
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-house icons"></i>
</a>
</li>
</ul>
</div>
Your CSS code which works, adjust it like this
/* Your container should have position relative and a height of the viewport */
.container {
position: relative;
border: 1px solid red;
height: 15rem;
}
.social {
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
z-index: 1;
}
.social li {
list-style: none;
}
.social li a {
display: inline-block;
color : #fff;
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover {
transform: scale(0.65) translateY(-15px);
}
to do that you can use absolute positioning.
we set our chosen element position to absolute and its container position to relative.
so you choose body as its container and set position for body to relative.
You can change the position of social class to fixed instead of absolute.

How to auto hide nav bar when a link is clicked?

Trying to build my first project, a restaurant website but having some trouble with toggling the nav bar. The nav bar links direct the user to the specified section, but the nav bar remains open after that section is reached/ How do I get it to close after clicking on a link?
This is the JavaScript I'm using:
//select element function
const selectElement=function(element){
return document.querySelector(element);
};
let menuToggler=selectElement('.menu-toggle');
let body=selectElement('body');
menuToggler.addEventListener('click',function(){
body.classList.toggle('open');
});
the HTML of the header/navbar section :
<script src="https://unpkg.com/scrollreveal" charset="utf-8"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav" id="navbar">
<div class="menu-toggle" id="menu-toggle">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<img src="" alt="">
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Menu
</li>
<li class="nav-item">
Order Online
</li>
<li class="nav-item">
Make a Reservation
<li class="nav-item">
Contact Us
</li>
</ul>
</nav>
</div>
</header>
<!-- Header ends-->
CSS of the header, using font awesome
.nav{
height: 7.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle{
color: #fff;
font-size: 2.2rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 2.5rem;
cursor: pointer;
z-index: 1800;
}
/*to hide x of nav bar*/
.fa-times{
display: none;
}
.nav-list{
list-style: none;
position: fixed;
top: 0;
left: 0;
width: 70%;
height:100vh;
background-color: var(--main-font-color-dark);
padding: 4.4rem;
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 1850;
transform: translateX(-100%); /*hides nav bar*/
transition: transform .5s;
}
/*before nav clicked*/
.nav::before{
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.8);
z-index: 1000;
opacity: 0;
trasform:scale(0);
transition: opacity .5s;
}
.open .fa-times{
display: block;
}
/*hides hamburger icon on clicking it*/
.open .fa-bars{
display: none;
}
.open .nav-list{
transform: translateX(0);
}
.open .nav::before{
opacity: 1;
transform: scale(1);
}
let navbar= document.getElementById("navbar")
let link= document.getElementById("link-a")
let showMenu= document.getElementById("show-menu")
link.addEventListener('click',function(){
document.getElementById("navbar").style.display = "none"
});
showMenu.addEventListener('click',function(){
document.getElementById("navbar").style.display = "flex"
});
#navbar{
height: 40px;
width: 100%;
background: red;
}
<div id="navbar" >
<a id="link-a">Click me to hide menu</a>
</div>
<div id="show-menu"> Show menu</div>
small demo to toggle menu

Click function within click function not working

I'm building a website and have a few bugs I'm trying to clean up. As of right now, when the "bio" button is toggle-able, and when its visible, it hides all of the content within the middle container, and when its hidden, the logo container is 100% width and height.
Though, when, I click on the top or bottom navigation links after, ideally I want the logo image container & the navigation copy container to be visible, but at the moment only the logo container is.
$(document).ready(function() {
$("#bio-text-button").click(function(){
$("#bio-container").toggle();
if($(this).is(':visible')) {
$("#logo-img-container").toggle();
$("#nav-copy-container").hide();
}
else if($(this).is(':hidden')) {
$("#nav-copy-container").show();
$("#nav-copy-container").animate({
width: "100%",
}, 1500 )
$("#logo-img-container").animate({
width: "100%",
}, 1500 )
$("#logo-img-container").show();
}
});
});
#main-container {
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 110vw;
height: 100vh;
-webkit-transition: 1s;
transition: 1s;
}
#content-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
#top-nav-container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-flow: wrap;
slign-content: center;
align-items: center;
height: 10%;
width: 90%;
}
#top-nav-link-container {
margin-left: 10px;
margin-right: 10px;
}
#top-nav-link-container:hover {
-webkit-transition: 1s;
transition: 1s;
transform: skewX(-20deg);
}
#top-nav-link {
font-size: 20px;
color: black;
cursor: pointer;
}
#middle-container {
display: flex;
border: 2px solid black;
height: 80%;
width: 90%;
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-transition: 1s;
transition: 1s;
align-items: center;
overflow: auto;
}
#logo-img-container {
height: 100%;
width: 100%;
-webkit-transition: 1s;
transition: 1s;
}
#logo-img {
height: 100%;
width: 100%;
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603eec4c1f090e06f6ee6884/1614736460512/Solace_Logo-01.png");
background-repeat: no-repeat;
background-position: center;
background-size: 70%;
}
#nav-copy-container {
display: none;
height: 100%;
width: 40%;
border-left: 2px solid black;
overflow: auto;
cursor: pointer;
justify-content: center;
text-align: center !important;
align-self: center;
align-content: center;
align-items: center;
}
#bio-container {
display: none;
height: 100%;
width: 100%;
-webkit-transition: 1s;
transition: 1s;
}
#bio-container-copy {
font-size: 20px;
color: black;
margin: 20px;
}
#bio-name {
-webkit-transition: 1s;
transition: 1s;
transform: skewX(-20deg) !important;
}
#bottom-nav-container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-flow: wrap;
slign-content: center;
align-items: center;
height: 10%;
width: 90%;
}
#bottom-nav-link-container {
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-container">
<div id="content-container">
<div id="top-nav-container">
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-one"> therapy </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-extra"> support </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-two"> meditation </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-three"> covid-19 support </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-four"> spiritual practitioners </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-five"> food </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-six"> collectives & community spaces </div>
</div>
</div>
<div id="middle-container">
<div id="logo-img-container" class="ripple">
<div id="logo-img"></div>
</div>
<div id="bio-container">
<div id="bio-container-copy">
An ever-evolving library of resources for mental health support, healing, and wellness centering BIPOC & LGBTQ communities.
Solace was created out of the deep & immediate need to decolonize healing & share accessible methods of support for marginalized folks.
<br><br>
<i>Solace is not affiliated with any of the resources listed.</i>
<br><br>
Designed by: <span id="bio-name">Lizette Ayala</span> <br>
Logo by: <span id="bio-name">Rin Kim Ni</span>
<br><br>
Contact: <a href="mailto:studio#nataliamantini.com">studio#nataliamantini.com
</a></div>
</div>
</div>
<div id="bottom-nav-container">
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-seven"> skin/body/haircare - bipoc independent businesses </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-eight"> media </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-nine"> yoga </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-ten"> advice </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-eleven"> herbalism & decolonized medicine </div>
</div>
</div>
</div>
<div id="buttons-container">
<div id="bio-text-container">
<div id="bio-text-button"> bio </div>
</div>
<div id="button">
<span class="dot" id="clickme-1"></span>
</div>
<div id="button">
<span class="dot-two" id="clickme-2"></span>
</div>
<div id="button">
<span class="dot-three" id="clickme-3"></span>
</div>
<div id="button">
<span class="dot-four" id="clickme-4"></span>
</div>
</div>
</div>
Any help would be greatly appreciated!
You can add a click event for the entire body that hides the bio when the user click else where, whilst the bio is visible. Furthermore, update your current click event like so;
$(document).ready(function() {
$("#bio-text-button").click(function(event) {
event.stopPropagation();
if ($("#bio-container").is(':visible')) {
$('#logo-img-container').show();
$("#bio-container").hide();
} else {
$('#logo-img-container').hide();
$("#bio-container").show();
}
});
$('body').on('click', function(event) {
if (!$(event.target).is('#bio-container-copy')) {
$('#logo-img-container').show();
$("#bio-container").hide();
}
});
});
#main-container {
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 110vw;
height: 100vh;
-webkit-transition: 1s;
transition: 1s;
}
#content-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
#top-nav-container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-flow: wrap;
slign-content: center;
align-items: center;
height: 10%;
width: 90%;
}
#top-nav-link-container {
margin-left: 10px;
margin-right: 10px;
}
#top-nav-link-container:hover {
-webkit-transition: 1s;
transition: 1s;
transform: skewX(-20deg);
}
#top-nav-link {
font-size: 20px;
color: black;
cursor: pointer;
}
#middle-container {
display: flex;
border: 2px solid black;
height: 80%;
width: 90%;
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-transition: 1s;
transition: 1s;
align-items: center;
overflow: auto;
}
#logo-img-container {
height: 100%;
width: 100%;
-webkit-transition: 1s;
transition: 1s;
}
#logo-img {
height: 100%;
width: 100%;
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603eec4c1f090e06f6ee6884/1614736460512/Solace_Logo-01.png");
background-repeat: no-repeat;
background-position: center;
background-size: 70%;
}
#nav-copy-container {
display: none;
height: 100%;
width: 40%;
border-left: 2px solid black;
overflow: auto;
cursor: pointer;
justify-content: center;
text-align: center !important;
align-self: center;
align-content: center;
align-items: center;
}
#bio-container {
display: none;
height: 100%;
width: 100%;
-webkit-transition: 1s;
transition: 1s;
}
#bio-container-copy {
font-size: 20px;
color: black;
margin: 20px;
}
#bio-name {
-webkit-transition: 1s;
transition: 1s;
transform: skewX(-20deg) !important;
}
#bottom-nav-container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-flow: wrap;
slign-content: center;
align-items: center;
height: 10%;
width: 90%;
}
#bottom-nav-link-container {
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-container">
<div id="content-container">
<div id="top-nav-container">
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-one"> therapy </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-extra"> support </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-two"> meditation </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-three"> covid-19 support </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-four"> spiritual practitioners </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-five"> food </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-six"> collectives & community spaces </div>
</div>
</div>
<div id="middle-container">
<div id="logo-img-container" class="ripple">
<div id="logo-img"></div>
</div>
<div id="bio-container">
<div id="bio-container-copy">
An ever-evolving library of resources for mental health support, healing, and wellness centering BIPOC & LGBTQ communities. Solace was created out of the deep & immediate need to decolonize healing & share accessible methods of support for marginalized
folks.
<br><br>
<i>Solace is not affiliated with any of the resources listed.</i>
<br><br>
Designed by: <span id="bio-name">Lizette Ayala</span> <br> Logo by: <span id="bio-name">Rin Kim Ni</span>
<br><br> Contact: <a href="mailto:studio#nataliamantini.com">studio#nataliamantini.com
</a></div>
</div>
</div>
<div id="bottom-nav-container">
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-seven"> skin/body/haircare - bipoc independent businesses </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-eight"> media </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-nine"> yoga </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-ten"> advice </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-eleven"> herbalism & decolonized medicine </div>
</div>
</div>
</div>
<div id="buttons-container">
<div id="bio-text-container">
<div id="bio-text-button"> bio </div>
</div>
<div id="button">
<span class="dot" id="clickme-1"></span>
</div>
<div id="button">
<span class="dot-two" id="clickme-2"></span>
</div>
<div id="button">
<span class="dot-three" id="clickme-3"></span>
</div>
<div id="button">
<span class="dot-four" id="clickme-4"></span>
</div>
</div>
</div>

Content Slider stop and start in accordion

I have code below for a Pure CSS content slider in an accordion I have created. Is it possible to start and stop the Content Slider when the accordion is opened and closed? Currently the Content Slider keeps running even if the accordion is closed. Is this possible with Pure CSS? If not would this be possible with Vanilla JavaScript (no JQuery). Anything helps, cheers.
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
overflow: hidden;
}
.bold {
font-weight:bold;
color: #005bab;
}
.top {
margin-top:-20px;
text-align: center;
font-size:13px;
}
.input {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
position: relative;
text-align: center;
display: block;
padding: 0 0 0 1em;
color: #005bab;
background: #e2ecf6;
font-size: 14px;
font-family: Verdana;
font-weight: bold;
line-height: 6;
cursor: pointer;
}
.label:hover {
background-color: #d2e2ef;
}
.tab-content {
max-height: 0;
overflow: hidden;
padding: 0px;
-webkit-transition: max-height .5s;
-o-transition: max-height .5s;
transition: max-height .5s;
padding-left: 35px;
background: #dce7f2;
}
.tab-content .container {
padding: 1em;
margin: 0;
opacity: 0;
transform: scale(0.75);
-webkit-transition: transform 0.75s, opacity .75s;
-o-transition: transform 0.75s, opacity .75s;
transition: transform 0.75s, opacity .75s;
background: #f4f8fc;
}
/* :checked */
.input:checked~.tab-content {
max-height: 35em;
}
.input:checked~.tab-content .container {
transform: scale(1);
opacity: 1;
}
/* Icon */
.label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.input[type=checkbox]+.label::after {
content: "+";
}
.input[type=radio]+.label::after {
content: "";
}
.input[type=checkbox]:checked+.label::after {
transform: rotate(315deg);
}
.input[type=radio]:checked+.label::after {
transform: rotateX(180deg);
}
.bottombar {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #00688B;
}
/* 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: 130px;
height: 130px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:5px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 12px;
text-align: center;
width: 200px;
top: 45px;
margin-left:-35px;
bottom: 0;
position: absolute;
z-index: 99;
}
.circleinv{
width: 130px;
height: 130px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:5px;
border-color:transparent;
}
.arrow {
width:145px;
height:45px;
}
.arrowinv {
visibility:hidden;
width:145px;
height:50px;
}
.flipimage {
width:145px;
height:45px;
-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 90s infinite linear;
}
.ul:hover {
animation-play-state:paused;
}
#keyframes slidli {
100% {
transform:translatex(-733.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="top">
<p>
<span style="font-family: verdana;"><strong>Click the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>" to expand and the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>" to collapse</strong></span></p>
</div>
<div class="wrapper">
<div class="tab">
<input name="tabs" class="input" id="tab-one" type="checkbox"/>
<label class="label" for="tab-one">Content Slider</label>
<div class="tab-content">
<div class="container">
<div class="everything">
<div id="scroller" style="width: 400px; height: 255px; margin: 0 auto;">
<div class="innerScrollArea">
<ul class="ul">
<li>
<br style="line-height:49px;"/>
<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/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<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/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<!--Dupes-->
<li>
<br style="line-height:49px;"/>
<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/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<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/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<!--Dupe 2-->
<li>
<br style="line-height:49px;"/>
<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/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<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/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<!--Dupe 3-->
<li>
<br style="line-height:49px;"/>
<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/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<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/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottombar"></div>
</div>
I would normally advise that you do this kind of stuff with JS but if you want to avoid it here's a working (albeit verbose) solution:
replace
.ul:hover {
animation-play-state:paused;
}
with
.input:checked~.tab-content .container .ul:hover {
animation-play-state:paused;
}
.tab-content .container .ul{
animation-play-state:paused;
}
.input:checked~.tab-content .container .ul {
animation-play-state:running;
}
Here's a pen showing the solution.
https://codepen.io/anon/pen/zzaKow

Flexbox grow inside anchor

I'm facing a problem where I would like an anchor flexbox child to take all remaining height available. I thought that adding flex-grow: 1 would suffice but it is not working. The div inside the anchor does not take the full height.
Question: Is there a way to make it work without converting my plain anchor to a flexbox element?
Here is a codepen illustrating the issue:
https://codepen.io/alansouzati/pen/YVpYeO
I've created 3 tiles where the first one has the anchor to exemplify. You can see that the price does not align with the other siblings.
.plain is not a flex parent, so setting flex-grow: 1 on .service doesn't do anything.
Just add display: flex to .plain
.tiles {
display: flex;
flex-wrap: wrap;
background-color: #d3d3d3;
padding: 12px;
justify-content: center;
}
.tile {
display: flex;
border: 1px solid #333;
flex-basis: 200px;
background-color: white;
margin: 12px;
flex-direction: column;
}
.tile:hover {
background-color: #f1f1f1;
}
.service {
display: flex;
flex-direction: column;
padding: 12px;
flex-grow: 1;
}
.service-body {
flex-grow: 1;
}
p {
color: #a8a8a8;
}
.plain {
margin: 0;
color:inherit;
text-decoration:none;
flex-grow: 1;
display: flex;
}
<div class='tiles'>
<div class='tile'>
<a href="http://google.com" class='plain' target="_blank">
<div class='service'>
<h2>Service 1</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</a>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 2</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 3</h2>
<div class='service-body'>
<p>This is a sample service with a long text that will make things render differently</p>
</div>
<span>$9.99</span>
</div>
</div>
</div>
See Below. I made the ".service" after the anchor tag absolute and relative to the main container. Hope it helps
.tiles {
display: flex;
flex-wrap: wrap;
background-color: #d3d3d3;
padding: 12px;
justify-content: center;
}
.tile {
display: flex;
border: 1px solid #333;
flex-basis: 200px;
background-color: white;
margin: 12px;
flex-direction: column;
position: relative;/**Added Code**/
}
.tile:hover {
background-color: #f1f1f1;
}
.service {
display: flex;
flex-direction: column;
padding: 12px;
flex-grow: 1;
}
.service-body {
flex-grow: 1;
}
p {
color: #a8a8a8;
}
.plain {
margin: 0;
color:inherit;
text-decoration:none;
flex-grow: 1;
}
/**Added Code**/
.plain > .service {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='tiles'>
<div class='tile'>
<a href="http://google.com" class='plain' target="_blank">
<div class='service'>
<h2>Service 1</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</a>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 2</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 3</h2>
<div class='service-body'>
<p>This is a sample service with a long text that will make things render differently</p>
</div>
<span>$9.99</span>
</div>
</div>
</div>

Categories

Resources