i am trying to create a CSS Animation for a vertical line going upwards - the line should be within a specific div
I have used gsap - i have used as well ypercent field, however the line starts from below the FirstScene div while i need it to be contained within the FirstScene div
gsap.fromTo(".vertical-line",{ yPercent:10 }, {yPercent:0,duration: 5});
* {
margin: 0;
padding: 0
}
.topnav {
position: sticky;
top: 0;
font-size: x-large;
background-color: black;
position: -webkit-sticky;
overflow: hidden;
z-index: 1;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: right;
padding: 8px;
color: white;
display: inline;
}
linkStyle {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li i {
color: white;
text-decoration: none;
}
li a {
color: white;
text-decoration: none;
}
#li-left {
float: left;
}
body {
margin: 0px;
height: 100%;
}
.FirstScene {
background-color: black;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.line {
left: 50%;
top: 50%;
width=10px;
height: 50%;
position: absolute;
}
.vertical-line {
border-left: 6px solid blue;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<div class="topnav">
<ul>
<li id="li-left">
<Link to="/" class="linkStyle"> MINA IBRAHIM
</Link>
</li>
<li>
<a href="https://github.com/ibrahimmina">
<i class="fa-brands fa-github"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/minasamyibrahim/">
<i class="fa-brands fa-linkedin"></i>
</a>
</li>
<li>
.email()
</li>
<li>
<Link to="/about" class="linkStyle"> .about()
</Link>
</li>
</ul>
</div>
<body>
<section class="FirstScene">
<div class="line">
<div class="vertical-line">
</div>
</div>
</section>
</body>
Please use the bellow css for the Vertical Line Going Upwards animations
.FirstScene{
background-color: black;
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
.vertical-line{
border-left: 6px solid blue;
animation-name: line;
animation-duration: 5s;
animation-iteration-count: 1;
left: 0;
height: 50%;
width: 10px;
position: absolute;
bottom: 0;
right: 0;
margin: 0 auto;
}
#keyframes line{
0%{
height: 0px;
}
100%{
height: 50%;
}
}
Related
I am trying to create a vertical timeline having this codepen as reference but unfortunately it's not working for me.
My code is here in this sandbox
App.js
import styles from "./styles.module.css";
export default function App() {
return (
<div className="App">
<div className={styles.carouselContentWrapper}>
<div className={styles.year}>
<span>2021</span>
</div>
<ul className={styles.textWrapper}>
<li className={styles.text1}>Text1</li>
<li className={styles.text2}>Text2</li>
</ul>
</div>
</div>
);
}
Styles.module.css
.textWrapper ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.textWrapper ul li::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
z-index: 1;
}
Any ideas on what is causing this would be much appreciated.
Note: Just to mention that I am using css modules in my original project so would like it to work by using css modules.
You can put text in div so you can position it:
.textWrapper ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.textWrapper ul li::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
z-index: -1;
}
.textWrapper ul li div {
position: absolute;
left: 20px;
top: 25px;
color: white;
}
body {
background-color: blueviolet
}
<div class="App">
<div class={styles.carouselContentWrapper}>
<div class={styles.year}>
<span>2021</span>
</div>
<div class=textWrapper>
<ul>
<li class={styles.text}>
<div>Text1</div>
</li>
<li class={styles.text}>
<div>Text2</div>
</li>
</ul>
</div>
</div>
</div>
it works as reference codepan. give background color to your ul or change for li.
To make sure the media query was actually working and the problem not being me setting the wrong max-width, I set the nav bar to change color and height when the max width was reached. My main goal was for the search bar to move further to the left but this doesn't work (the change in background color was for visual purposes). Why is this so? I'm trying to reposition the search bar as it glitches once the screen gets smaller.
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: rgb(255, 255, 255);
display: inline-flex;
height: 35px;
transform: translate(180px, -1px);
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
#media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
.search {
background-color: indigo;
}
}
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>
Your media query is working as expected: The background-colors are applied and the height is set. The background-color for .search wasn't so good visible because the search input has a width: 0px - therefor i tested with 50px. The change of the height wasn't visible because everything was white - therefor i tested with:
nav {
background-color: #ccc;
}
Now you can see that on big screens the nav has no height (= auto) and on small screens 40px (use the browsers dev tools).
Working example:
nav {
background-color: #ccc;
}
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: lightcoral;
display: inline-flex;
height: 35px;
transform: translate(180px, -1px);
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
.search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
#media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
.search {
background-color: indigo;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>
Alternative example:
with display: flex for the whole nav container and deactivated transform for the ul in the media query
nav {
display: flex;
justify-content: space-between;
background-color: #ccc;
}
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: lightcoral;
display: inline-flex;
height: 35px;
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
.search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
#media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
nav ul {
transform: none;
}
.search {
background-color: indigo;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>
If it is not working for all the div's, check if you forgot to put <meta content="width=device-width, initial-scale=1" name="viewport" /> inside your <head> </head> tags where you have your HTML code. This should do the trick.
I am working on the following piece of code displaying the progress:
ol.progress[data-steps="2"] li {
width: 49%;
}
ol.progress[data-steps="3"] li {
width: 33%;
}
ol.progress[data-steps="4"] li {
width: 24%;
}
ol.progress[data-steps="5"] li {
width: 19%;
}
ol.progress[data-steps="6"] li {
width: 16%;
}
ol.progress[data-steps="7"] li {
width: 14%;
}
ol.progress[data-steps="8"] li {
width: 12%;
}
ol.progress[data-steps="9"] li {
width: 11%;
}
.progress {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.progress li {
float: left;
text-align: center;
position: relative;
font-family: sans-serif;
}
.progress .name,
.progress .description {
display: block;
vertical-align: bottom;
text-align: center;
color: black;
opacity: 0.3;
}
.progress .name {
font-size: 1.5em;
margin-top: 1em;
margin-bottom: 0.5em;
}
.progress .step {
border: 3px solid #b6b6b6;
background-color: #b6b6b6;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 0;
}
.progress .step:before {
content: "";
display: block;
background-color: #b6b6b6;
border: 3px transparent;
height: 0.2em;
width: 100%;
position: absolute;
top: 0.6em;
left: -50%;
z-index: -2;
}
.progress .step:after {
content: "";
display: block;
background-color: #1876d5;
border: 3px transparent;
height: 0.35em;
width: 0;
position: absolute;
top: 0.55em;
left: 50%;
z-index: -1;
}
.progress li:first-of-type .step:before {
display: none;
}
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step {
background-color: #1876d5;
border: 3px solid #1876d5;
}
.progress .done .step:after {
width: 100%;
transition: width 2s ease;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ol class="progress" id="test" data-steps="4">
<li class="done">
<span class="step"></span>
<span class="name">Step 1</span>
<span class="description">Foo</span>
</li>
<li class="done">
<span class="step"></span>
<span class="name">Step 2</span>
<span class="description">Bar</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 3</span>
<span class="description">Baz</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 4</span>
<span class="description">Abc</span>
</li>
</ol>
</body>
</html>
I got this output with the above code. Using CSS, I was trying the exclude the blue color between 2nd and 3rd step so that it remains grey color(similar to the one between step 3 and step 4). I tried below which is not working:
.progress .step:last-of-type .step:before {
display: none;
}
Is there any similar type of CSS that can be used to achieve this functionality. Thanks.
If I understood your answer this will solve your issue just use nth-child selector to exclude the blue color between 2nd and 3rd step.
The following is an example
ol.progress[data-steps="2"] li {
width: 49%;
}
ol.progress[data-steps="3"] li {
width: 33%;
}
ol.progress[data-steps="4"] li {
width: 24%;
}
ol.progress[data-steps="5"] li {
width: 19%;
}
ol.progress[data-steps="6"] li {
width: 16%;
}
ol.progress[data-steps="7"] li {
width: 14%;
}
ol.progress[data-steps="8"] li {
width: 12%;
}
ol.progress[data-steps="9"] li {
width: 11%;
}
.progress {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.progress li {
float: left;
text-align: center;
position: relative;
font-family: sans-serif;
}
.progress .name,
.progress .description {
display: block;
vertical-align: bottom;
text-align: center;
color: black;
opacity: 0.3;
}
.progress .name {
font-size: 1.5em;
margin-top: 1em;
margin-bottom: 0.5em;
}
.progress .step {
border: 3px solid #b6b6b6;
background-color: #b6b6b6;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 0;
}
.progress .step:before {
content: "";
display: block;
background-color: #b6b6b6;
border: 3px transparent;
height: 0.2em;
width: 100%;
position: absolute;
top: 0.6em;
left: -50%;
z-index: -2;
}
.progress .step:after {
content: "";
display: block;
background-color: #1876d5;
border: 3px transparent;
height: 0.35em;
width: 0;
position: absolute;
top: 0.55em;
left: 50%;
z-index: -1;
}
.progress li:first-of-type .step:before {
display: none;
}
/*=========== added =====================*/
.progress li:nth-child(2) .step:before {
display: none;
}
.progress li:nth-child(2) .step:after {
display: none;
}
/*=========== added =====================*/
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step {
background-color: #1876d5;
border: 3px solid #1876d5;
}
.progress .done .step:after {
width: 100%;
transition: width 2s ease;
}
<ol class="progress" id="test" data-steps="4">
<li class="done">
<span class="step"></span>
<span class="name">Step 1</span>
<span class="description">Foo</span>
</li>
<li class="done">
<span class="step"></span>
<span class="name">Step 2</span>
<span class="description">Bar</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 3</span>
<span class="description">Baz</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 4</span>
<span class="description">Abc</span>
</li>
</ol>
And if you want some dynamic where you will use .done class name to control the steps without getting stuck with nth-child selector.
The following is an example where there is none of li elements have .done class name
ol.progress[data-steps="2"] li {
width: 49%;
}
ol.progress[data-steps="3"] li {
width: 33%;
}
ol.progress[data-steps="4"] li {
width: 24%;
}
ol.progress[data-steps="5"] li {
width: 19%;
}
ol.progress[data-steps="6"] li {
width: 16%;
}
ol.progress[data-steps="7"] li {
width: 14%;
}
ol.progress[data-steps="8"] li {
width: 12%;
}
ol.progress[data-steps="9"] li {
width: 11%;
}
.progress {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.progress li {
float: left;
text-align: center;
position: relative;
font-family: sans-serif;
}
.progress .name,
.progress .description {
display: block;
vertical-align: bottom;
text-align: center;
color: black;
opacity: 0.3;
}
.progress .name {
font-size: 1.5em;
margin-top: 1em;
margin-bottom: 0.5em;
}
.progress .step {
border: 3px solid #b6b6b6;
background-color: #b6b6b6;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 0;
}
.progress .step:before {
content: "";
display: block;
background-color: #b6b6b6;
border: 3px transparent;
height: 0.2em;
width: 100%;
position: absolute;
top: 0.6em;
left: -50%;
z-index: -2;
}
.progress .done .step:after {
content: "";
display: block;
background-color: #1876d5;
border: 3px transparent;
height: 0.35em;
width: 0;
position: absolute;
top: 0.55em;
left: 50%;
z-index: -1;
}
.progress li:first-of-type .step:before,
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step {
background-color: #1876d5;
border: 3px solid #1876d5;
}
.progress .done .step:after {
width: 100%;
transition: width 2s ease;
}
<ol class="progress" id="test" data-steps="4">
<li class="">
<span class="step"></span>
<span class="name">Step 1</span>
<span class="description">Foo</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 2</span>
<span class="description">Bar</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 3</span>
<span class="description">Baz</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 4</span>
<span class="description">Abc</span>
</li>
</ol>
The following is an example where there first and third li have .done class name
ol.progress[data-steps="2"] li {
width: 49%;
}
ol.progress[data-steps="3"] li {
width: 33%;
}
ol.progress[data-steps="4"] li {
width: 24%;
}
ol.progress[data-steps="5"] li {
width: 19%;
}
ol.progress[data-steps="6"] li {
width: 16%;
}
ol.progress[data-steps="7"] li {
width: 14%;
}
ol.progress[data-steps="8"] li {
width: 12%;
}
ol.progress[data-steps="9"] li {
width: 11%;
}
.progress {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.progress li {
float: left;
text-align: center;
position: relative;
font-family: sans-serif;
}
.progress .name,
.progress .description {
display: block;
vertical-align: bottom;
text-align: center;
color: black;
opacity: 0.3;
}
.progress .name {
font-size: 1.5em;
margin-top: 1em;
margin-bottom: 0.5em;
}
.progress .step {
border: 3px solid #b6b6b6;
background-color: #b6b6b6;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 0;
}
.progress .step:before {
content: "";
display: block;
background-color: #b6b6b6;
border: 3px transparent;
height: 0.2em;
width: 100%;
position: absolute;
top: 0.6em;
left: -50%;
z-index: -2;
}
.progress .done .step:after {
content: "";
display: block;
background-color: #1876d5;
border: 3px transparent;
height: 0.35em;
width: 0;
position: absolute;
top: 0.55em;
left: 50%;
z-index: -1;
}
.progress li:first-of-type .step:before,
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step {
background-color: #1876d5;
border: 3px solid #1876d5;
}
.progress .done .step:after {
width: 100%;
transition: width 2s ease;
}
<ol class="progress" id="test" data-steps="4">
<li class="done">
<span class="step"></span>
<span class="name">Step 1</span>
<span class="description">Foo</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 2</span>
<span class="description">Bar</span>
</li>
<li class="done">
<span class="step"></span>
<span class="name">Step 3</span>
<span class="description">Baz</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 4</span>
<span class="description">Abc</span>
</li>
</ol>
In yellow square I have a hover effect, but when hover display the higher the green block. I need what would be the hover effect of only at yellow square.
I tried to use z-index - did not help.
What am I doing wrong?
*{
padding: 0;
margin: 0;
}
.wrapper {
border:2px solid black;
margin-top: 20px;
padding: 20px 20px;
height: 100%;
}
.block__one {
background-color:green;
z-index:5;
position: relative;
}
.item {
padding: 10px;
margin: 0;
text-align:center;
}
.list {
display: inline-block;
width: 50px;
height: 40px;
background-color:yellow;
position: relative;
z-index:10;
}
.list:hover .list__hover {
opacity:1;
bottom:0;
}
.list__hover {
width: 100%;
height: 50%;
background-color: #fff;
position: absolute;
bottom:-50px;
transition: bottom 0.5s;
opacity:0;
z-index:4;
}
.block__two {
background-color:red;
width: 100%;
height: 200px;
z-index:5;
position: relative;
}
<div class="wrapper">
<div class="block__one">
<ul class="item">
<li class="list">
<div class="list__hover"></div>
</li>
<li class="list">
<div class="list__hover"></div>
</ul>
</div>
<div class="block__two"></div>
</div>
I'm not certain I've 100% understood your post, but I believe that all you need is to add
overflow:hidden
to the .list class
Check if the snippet is doing what you want:
*{
padding: 0;
margin: 0;
}
.wrapper {
border:2px solid black;
margin-top: 20px;
padding: 20px 20px;
height: 100%;
}
.block__one {
background-color:green;
z-index:5;
position: relative;
}
.item {
padding: 10px;
margin: 0;
text-align:center;
}
.list {
display: inline-block;
width: 50px;
height: 40px;
background-color:yellow;
position: relative;
z-index:10;
overflow:hidden;
}
.list:hover .list__hover {
opacity:1;
bottom:0;
}
.list__hover {
width: 100%;
height: 50%;
background-color: #fff;
position: absolute;
bottom:-50px;
transition: bottom 0.5s;
opacity:0;
z-index:4;
}
.block__two {
background-color:red;
width: 100%;
height: 200px;
z-index:5;
position: relative;
}
<div class="wrapper">
<div class="block__one">
<ul class="item">
<li class="list">
<div class="list__hover"></div>
</li>
<li class="list">
<div class="list__hover"></div>
</ul>
</div>
<div class="block__two"></div>
</div>
Here's another solution using first height of 0% and then transitioning it to 50%. Also check your code, there's a few mistakes in it. You could, for example, use W3 validator.
* {
padding: 0;
margin: 0;
}
.wrapper {
border: 2px solid black;
margin-top: 20px;
padding: 20px 20px;
height: 100%;
}
.block__one {
background-color: green;
z-index: 5;
position: relative;
}
.item {
padding: 10px;
margin: 0;
text-align: center;
}
.list {
display: inline-block;
width: 50px;
height: 40px;
background-color: yellow;
position: relative;
z-index: 10;
}
.list:hover .list__hover {
opacity: 1;
bottom: 0px;
height: 50%;
transition: linear .5s;
}
.list__hover {
width: 100%;
height: 0%;
background-color: #fff;
position: absolute;
bottom: 0px;
opacity: 0;
z-index: 4;
}
.block__two {
background-color: red;
width: 100%;
height: 200px;
z-index: 5;
position: relative;
}
<div class="wrapper">
<div class="block__one">
<ul class="item">
<li class="list">
<div class="list__hover"></div>
</li>
<li class="list">
<div class="list__hover"></div>
</li>
</ul>
</div>
<div class="block__two"></div>
</div>
I've been trying to get this list of buttons to have a scroll bar and scroll on table and smaller screens. I've add two divs for inner and outter to add overflow: hidden on outter and overflow: auto on inner. I can't seem to get this to work. Can anyone tell me what I'm missing?
Created a JSFiddle as asked and it works here. Maybe it is an issue with my SASS
http://jsfiddle.net/tuckerjoenz/p9afq4y9/
HTML
<div class="circle-outer">
<div class="circle-button-menu-container">
<ul class="field field-name-field-link-button field-type-entityreference field-label-hidden">
<li class="link-button">
<span property="dc:title" class="rdf-meta element-hidden"></span>
<a class="circle-button" href="#parents">
<div class="circle-image">
<img class="active" src="../images/Parent_2_0.jpg">
</div>
<div class="button-title">Parents</div>
</a>
</li>
<li class="link-button">
<span property="dc:title" class="rdf-meta element-hidden"></span>
<a class="circle-button" href="#kids">
<div class="circle-image">
<img class="active" src="../images/kids_JPEG_0.jpg">
</div>
<div class="button-title">Kids</div>
</a>
</li>
<li class="link-button">
<span property="dc:title" class="rdf-meta element-hidden"></span>
<a class="circle-button" href="#educators">
<div class="circle-image">
<img class="active" src="../images/Educator_JPEG_0.jpg">
</div>
<div class="button-title">Educators</div>
</a>
</li>
<li class="link-button">
<span property="dc:title" class="rdf-meta element-hidden"></span>
<a class="circle-button" href="#volunteer">
<div class="circle-image">
<img class="active" src="../images/volunteer_JPEG_0.jpg">
</div>
<div class="button-title">Volunteer</div>
</a>
</li>
</ul>
</div>
</div>
SASS
.circle-outer {
height: 350px;
display: block;
margin: 0 auto;
width: 100%;
margin-top: -200px;
padding: 100px 0px 0px;
overflow: hidden;
.circle-button-menu-container {
overflow: auto;
.field-name-field-link-button {
text-align: center;
display: block;
width: 1000%;
z-index: 100;
list-style-type: none;
position: absolute;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
.link-button {
margin: 0px 46px 10px;
float: left;
text-decoration: none;
list-style: none;
position: relative;
display: block;
width: 170px;
a.circle-button {
display: block;
text-decoration: none;
.circle-image {
border: 10px solid white;
border-radius: 50%;
box-shadow: 0 4px 2px -2px gray;
overflow: hidden;
width: 170px;
height: 170px;
img {
display: block;
min-width: 100%;
min-height: 100%;
width: 100%;
}
&:hover, &:active {
border: 10px solid #b6b6b6;
box-shadow: none;
}
}
.button-title {
text-transform: uppercase;
color: #40749e;
font-weight: bold;
font-size: 1.3em;
margin-top: 10px;
}
&:before, &:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
&:before {
bottom: -33px;
left: 39%;
border-top-color: #b6b6b6;
border-width: 17px;
}
&:after {
bottom: -28px;
left: 40%;
border-top-color: #fff;
border-width: 15px;
}
}
}
}
}
}
Ok I figured this out. I had to remove the position: absolue on the .circle-button-menu-container class and it works! Thanks!
You could try overflow:scroll