In my css I have the following :
style.css
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
font-family: 'Cabin', sans-serif;
}
/*.clear {
clear: both;
}*/
.clear:after {
display: block;
clear: both;
visibility: hidden;
content: "";
height: 0;
}
/* HEADER BLOCK */
.header-background {
padding-top: 50px;
}
.header-background > div:first-child {
width: 100%;
background: #232323;
}
.header {
background: #232323;
color: #B2B2B2;
width: 80%;
margin: auto;
}
.header a {
text-decoration: none;
color: white;
}
.header a:active {
color: #19A3A3;
}
#nav {
position: relative;
display: block;
height: 55px;
line-height: 55px;
width: 100%;
max-width: none;
margin: 0;
background: #333;
z-index: 1;
border-bottom: 1px solid #666;
font-weight: 600;
font-family: helvetica, arial, sans-serif;
font-size: 14px;
}
#nav, #nav * {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nav-item {
color: #fff;
text-transform: uppercase;
text-decoration: none;
}
/* Desktop */
#desktop-nav .nav-item {
display: block;
padding: 0 20px;
float: right;
-webkit-transition: color 200ms linear;
-moz-transition: color 200ms linear;
-ms-transition: color 200ms linear;
-o-transition: color 200ms linear;
transition: color 200ms linear;
}
#desktop-nav .nav-item:hover, #desktop-nav .nav-item:active {
opacity: 0.7;
}
And I have the following html:
<body>
<div class="header-background">
<!-- <div> -->
<div id="nav">
<nav id="desktop-nav">
<a class="nav-item" href="#1">Github</a>
<a class="nav-item" href="#2">About</a>
<a class="nav-item" href="#3">Community</a>
<a class="nav-item" href="#4">Docs</a>
</nav>
</div>
</div>
</body>
Now I am getting the view:--
But I want the view like :--
The menu should be in the middle. I have used text-align: center; but it is not executing. What I am doing wrong?
Change this
#nav {
margin: 0 auto; //added this
width: 400px; //added this
position: relative;
display: block;
height: 55px;
line-height: 55px;
max-width: none;
background: #333;
z-index: 1;
border-bottom: 1px solid #666;
font-weight: 600;
font-family: helvetica, arial, sans-serif;
font-size: 14px;
}
Fiddle: https://jsfiddle.net/fuehunfz/
Currently the #desktop-nav is centered but it's 100% wide so you need to shrink-wrap it by making it inline-block.
Then text-align:center on the #nav` will center it.
#nav {
text-align: center;
}
#desktop-nav {
display: inline-block;
}
JSfiddle Demo
Use following CSS Style in CSS class
margin: 0 auto;
Related
I'm working with React js and I have created a nav where lines animate from 0% to 100% under items on hover and the last item that was clicked gets assigned the .current class. The item with class .current should not animate but should maintain the line at 100% width. I had this working previously but I added CSS that moves the text in <li>'s on hover and it broke.
Snippet:
html,
body {
padding: 0;
margin: 0;
font-family: "sequel-sans-roman", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
.navIcon {
display: inline-block;
flex-grow: 1;
}
.nav {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 2.4em;
/* coordinates w height of line away from link, MUST BE = */
}
.snip1168 {
text-align: center;
text-transform: uppercase;
}
.snip1168 * {
box-sizing: border-box;
}
.snip1168 li {
display: inline-block;
list-style: outside none none;
margin: 0 1.5em;
padding: 0;
background: ppink;
}
.snip1168 li {
padding: 2.4em 0 0.5em;
/* height of line away from link */
color: rgba(0, 0, 0, 1);
position: relative;
text-decoration: none;
background: pink;
display: inline-block;
}
.snip1168 li:before,
.snip1168 li:after {
position: absolute;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1168 li:before {
top: 0;
display: inline-block;
height: 3px;
width: 0%;
content: "";
background-color: black;
}
.snip1168 li:hover:before,
.snip1168 .current a:before {
opacity: 1;
width: 100%;
}
.snip1168 li:hover:after,
.snip1168 .current li:after {
max-width: 100%;
}
.mainText {
text-transform: uppercase;
font-size: 1.1rem;
}
.snip1168 li a {
transition: transform ease 400ms;
transform: translate(0, 0);
display: inline-block;
}
.snip1168 li:hover a {
transition: transform ease 400ms;
transform: translate(0, -10px);
}
<div class='container'>
<main class='main'>
<div class='nav'>
<div class='navIcon'>
<img src="https://picsum.photos/40" height={40} width={40} />
</div>
<ul class='snip1168'>
<li class='current'>Work</li>
<li>Recs</li>
<li>Say Hi</li>
</ul>
</div>
</main>
</div>
I have tried doing something like this but it has no effect:
.snip1168 .current a {
width: 100%;
}
How can I keep the lines at 100% width on .current ?
In the above code, you have used class="current" to show the clicked nav item, however, a good approach is to use id="current" instead (because there always will be a single item which is active/clicked/current) and add a new CSS rule like below.
li#current::before{
width:100% !important;
}
html,
body {
padding: 0;
margin: 0;
font-family: "sequel-sans-roman", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
.navIcon {
display: inline-block;
flex-grow: 1;
}
.nav {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 2.4em;
/* coordinates w height of line away from link, MUST BE = */
}
.snip1168 {
text-align: center;
text-transform: uppercase;
}
.snip1168 * {
box-sizing: border-box;
}
.snip1168 li {
display: inline-block;
list-style: outside none none;
margin: 0 1.5em;
padding: 0;
background: ppink;
}
.snip1168 li {
padding: 2.4em 0 0.5em;
/* height of line away from link */
color: rgba(0, 0, 0, 1);
position: relative;
text-decoration: none;
background: pink;
display: inline-block;
}
.snip1168 li:before,
.snip1168 li:after {
position: absolute;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1168 li:before {
top: 0;
display: inline-block;
height: 3px;
width: 0%;
content: "";
background-color: black;
}
.snip1168 li:hover:before,
.snip1168 .current a:before {
opacity: 1; /*not needed*/
width: 100%;
}
/*Added Code*/
li#current::before{
width:100% !important;
}
.snip1168 li:hover:after,
.snip1168 .current li:after {
max-width: 100%;
}
.mainText {
text-transform: uppercase;
font-size: 1.1rem;
}
.snip1168 li a {
transition: transform ease 400ms;
transform: translate(0, 0);
display: inline-block;
}
<div class='container'>
<main class='main'>
<div class='nav'>
<div class='navIcon'>
<img src="https://picsum.photos/40" height={40} width={40} />
</div>
<ul class='snip1168'>
<li id='current'>Work</li>
<li >Recs</li>
<li>Say Hi</li>
</ul>
</div>
</main>
</div>
Working example : Codepen
If I understood correctly you want the line that animates to stay visible aka 100% width when the .current is applied.
I believe Im seeing couple of mistakes especially with your selectors but to prevent breaking your existing code, adding this should fix it.
ul li.current::before {
width: 100%;
}
I provided my CSS and HTML down below. I am trying to finish off my dropdown, but there's an issue with it that makes the transition not so smooth. It's hard to explain with words on what it's doing.
I have tried changing the display, max-height, padding, and margin but there have been no results. Perhaps I need to add some JavaScript to it rather than CSS? Any suggestions or problems that can be pointed out will be great.
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #FFF;
margin-bottom: 210px;
border-radius: 5px;
}
#nav-container {
display: table;
margin: 10px auto;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
margin-top: -26px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
/* nav-dropdown */
#dropdown {
display: block;
position: absolute;
text-align: center;
width: 300px;
height: 50px;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
display: table-cell;
margin: 0;
cursor: pointer;
background-color: transparent;
text-align: center;
}
#extensions {
display: table;
border-collapse: separate;
border-spacing: 40px;
height: 50px;
width: 350px;
}
.label {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
text-align: center;
position: absolute;
width: 300px;
}
#dropdown-content {
position: absolute;
margin: 0 auto;
opacity: 0;
width: 300px;
height: 50px;
background-color: #C9C9C9;
border-radius: 8px;
box-shadow: 1px 1px 50px 0px white;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.nav-dropdown-container {width: 350px;height: 800px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown-content:hover {
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
margin-top: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
#dropdown-content:hover p {
display: block;
text-decoration: none;
transition: 0.5s;
}
#dropdown-content p {display: none;}
#dropdown-link {color: white;}
#dropdown-link:link {
color: white;
text-decoration: none;
}
#dropdown-link:hover {
color: lightgrey;
}
<nav id="navigation">
<div id="nav-container">
<ul id="nav-items">
<li>
<div id="extensions">
<div class="nav-dropdown-container">
<div id="dropdown">
<p class="label">TEST</p>
<div id="dropdown-content">
<p><a id="dropdown-link" href="hello.html">HELLO</a></p>
<p><a id="dropdown-link" href="world.html">WORLD</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
As stated in the comments, the reason is because when the :hover state is triggered on #dropdown-content, the mouse cursor quickly enters and leaves the element causing the state to be quickly toggled on and off repeatedly, resulting in a janky transition.
The fastest fix is this: you should change your selectors so that you bind the :hover state to the nearest common ancestor of both the label AND the dropdown content, i.e. #dropdown.
So you should change this:
#dropdown-content:hover { ... }
#dropdown-content:hover p { ... }
...to this:
#dropdown:hover #dropdown-content { ... }
#dropdown:hover #dropdown-content p { ... }
This is of course a stop-gap solution since I find your markup unnecessarily bloated in order to achieve a simple dropdown effect.
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #FFF;
margin-bottom: 210px;
border-radius: 5px;
}
#nav-container {
display: table;
margin: 10px auto;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
margin-top: -26px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
/* nav-dropdown */
#dropdown {
display: block;
position: absolute;
text-align: center;
width: 300px;
height: 50px;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
display: table-cell;
margin: 0;
cursor: pointer;
background-color: transparent;
text-align: center;
}
#extensions {
display: table;
border-collapse: separate;
border-spacing: 40px;
height: 50px;
width: 350px;
}
.label {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
text-align: center;
position: absolute;
width: 300px;
}
#dropdown-content {
position: absolute;
margin: 0 auto;
opacity: 0;
width: 300px;
height: 50px;
background-color: #C9C9C9;
border-radius: 8px;
box-shadow: 1px 1px 50px 0px white;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.nav-dropdown-container {
width: 350px;
height: 800px;
}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown:hover #dropdown-content {
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
margin-top: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
#dropdown:hover #dropdown-content p {
display: block;
text-decoration: none;
transition: 0.5s;
}
#dropdown-content p {
display: none;
}
#dropdown-link {
color: white;
}
#dropdown-link:link {
color: white;
text-decoration: none;
}
#dropdown-link:hover {
color: lightgrey;
}
<nav id="navigation">
<div id="nav-container">
<ul id="nav-items">
<li>
<div id="extensions">
<div class="nav-dropdown-container">
<div id="dropdown">
<p class="label">TEST</p>
<div id="dropdown-content">
<p><a id="dropdown-link" href="hello.html">HELLO</a></p>
<p><a id="dropdown-link" href="world.html">WORLD</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
I can't get an element to go where I want it to. I am only having this problem because of the way I did my header. I applied position: absolute. You can see an example here: http://jacobgasser.com and you can find all the code on there, or you can read down a little farther and I put it there.
I want the text in the top left of the page to be on the white part of the page
Here is the index.html
<body onload="loadUp();">
<div class="menu">
<a href="https://github.com/jacobgasser" target="_blank"><div
class="menuItem">Projects</div></a>
</div>
<div class="titleBG">
<h1 class="title" onmouseover="coolThing();"onmouseout="notCoolThing();">Jacob Gasser</h1>
</div>
<div class="article">
<div class="articleHead">Who am I?</div>
</div>
<script src="scripts/main.js"></script>
</body>
Here is main.css
body {
margin:0;
padding:0;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
}
a {
text-decoration: none;
color: inherit;
}
.article {
font-family: "Arial";
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
text-align: center;
position: relative;
}
.articleHead {
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
}
.menu {
display: block;
color: white;
float: right;
margin-right: 10px;
margin-top: 5px;
opacity: 0;
}
.menuItem {
font-size: 400%;
display: block;
padding-left: 20px;
padding-right: 20px;
-webkit-transition: 0.2s;
border-radius: 5px;
}
.menuItem:hover {
background-color: white;
color: black;
cursor: pointer;
-webkit-transition: 0.2s;
}
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
position: fixed;
top: 0;
}
::selection {
color: #23272A;
background-color: white;
}
::-moz-selection {
color: #23272A;
background-color: white;
}
#font-face {
font-family: lemon;
src: url("fonts/LemonMilk.otf");
}
#font-face {
font-family: cavs;
src: url("fonts/CaviarDreams.ttf");
}
A simple solution to this issue is to remove the position: fixed; top: 0; and adjust the margin-top and margin-bottom of the page. Just change the CSS for .titleBG and .title to be the following:
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
margin: 0 /* You can add a margin-left or margin-right if you want, or even margin-bottom, just keep the margin-top at 0*/;
}
This will give you the following result:
When I hover to one of the elements, that elements itself expands, and other will adjust when the font-size gets bigger. How to stop that?
Same is happening to the red background, so I set a height: 38px; to avoid expanding:
header {
position: relative;
top: 10px;
margin: 0 auto;
height: 38px;
width: 100%;
background: red;
}
Now I tried to set a height and width to a single <li> to see if it won't move/expand at all, but doesn't work:
<li style="width: 130px; height: 38px;">Home</li>
* {
margin: 0;
padding: 0;
}
body {
background: royalblue;
font-family: monospace;
}
header {
position: relative;
top: 10px;
margin: 0 auto;
height: 38px;
width: 100%;
background: red;
}
.parent-ul {
position: relative;
top: 0px;
list-style: none;
text-align: center;
padding: 11px 0;
}
.parent-ul li {
margin: -4px;
display: inline;
padding: 7px 13px;
border-left: 1px solid silver;
transition: background 1s, border 1s,
border-radius 1s;
}
#prod {
border-right: 1px solid silver;
padding-right: 15px;
}
.parent-ul a {
text-decoration: none;
color: white;
padding: 0px 50px;
font-size: 14px;
transition: color 1s, font-size .5s;
}
/* Effects ================================ */
li:hover {
background: black;
border: 0;
border-radius: 2px;
}
li:hover + li {
border: 0;
}
li:hover a {
color: gold;
font-size: 18px;
}
#prod:hover {
border: 0;
}
<body>
<header>
<ul class="parent-ul">
<li style="width: 130px; height: 38px;">Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li id="prod">Products</li>
</ul>
</header>
</body>
Yoy can use float: left and box-sizing: border-box to align the nav items. Also, use padding : 0 so that when you make the text big, it is centered. Here is an example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: royalblue;
font-family: monospace;
}
header {
position: relative;
margin: 0 auto;
height: 38px;
width: 100%;
background: red;
}
.parent-ul {
position: relative;
list-style: none;
text-align: center;
}
.parent-ul li {
height: 38px;
width: 20%;
float: left;
transition: background 1s, border 1s,
border-radius 1s;
}
.parent-ul li:not(:first-child) {
border-left: 1px solid silver;
}
.parent-ul a {
text-decoration: none;
color: white;
padding: 0;
font-size: 14px;
transition: color 1s, font-size .5s;
line-height: 38px;
}
/* Effects ================================ */
li:hover {
background: black;
border: 0;
border-radius: 2px;
cursor: pointer;
}
li:hover a {
color: gold;
font-size: 18px;
}
<body>
<header>
<ul class="parent-ul">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Products</li>
</ul>
</header>
</body>
You need to set its display property so that it accepts height and width of the element.
Try this
<li style="display:inline-block;width: 130px; height: 38px;">Home</li>
I give it a try with a different approach. Instead of changing the fontsize, you could scale the text (which is wrapped with <span></span> tag). Take a look at this https://jsbin.com/fekihusasi/edit?html,css,output.
You can use, Transform: scale(1.3 , 1.3); for the text when you hover on it.
take a look at this: https://plnkr.co/edit/JG3Y1PmLJK2hiL8JNGSy
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: royalblue;
font-family: monospace;
}
header {
position: relative;
margin: 0 auto;
height: 38px;
width: 100%;
background: red;
}
.parent-ul {
list-style: none;
text-align: center;
}
.parent-ul li {
width: 18%;
display: inline-block;
transition: background 1s, border 1s, border-radius 1s;
}
.parent-ul a {
text-decoration: none;
color: white;
padding: 0;
font-size: 14px;
transition: all .3s linear;
line-height: 38px;
}
/* Effects ================================ */
li:hover {
background: black;
border: 0;
border-radius: 2px;
cursor: pointer;
transition: all .3s linear;
}
li:hover a {
color: gold;
display: block;
transition: all .3s linear;
transform: scale(1.3, 1.3);
-ms-transform: scale(1.3, 1.3);
-webkit-transform: scale(1.3, 1.3);
}
Ok so I have 3 css circles with icon fonts centered inside of them, now I cant for the life of me get it centered inside of its parent. Also instead of lining up they are stacking on top of each other, I used float: left to fix this but it messed up my whole hover.
Take a look here, just go to portfolio section and hover over one of the members.
How it is suppose to look:
How it looks:
HTML:
<ul class="img-list">
<li>
<img src="img/team-member-1.jpg" alt="...">
<span class="text-content">
<span>
<div class="social-icon-holder">
<span class="ion-social-twitter social-icon"></span>
</div>
<div class="social-icon-holder">
<span class="ion-social-facebook social-icon"></span>
</div>
<div class="social-icon-holder">
<span class="ion-social-dribbble social-icon"></span>
</div>
Johnathan Adams
<p>Developer</p>
</span>
</span>
</li>
</ul>
CSS:
/* =Team
-------------------------------------------------------------- */
.team {
padding: 180px 0 180px 0;
}
.team img {
width: 100%;
height: 100%;
}
ul.img-list {
list-style-type: none;
padding: 0;
}
ul.img-list li {
display: inline-block;
position: relative;
height: 350px;
}
span.text-content {
background: rgba(39,39,39,0.75);
color: white;
cursor: pointer;
display: table;
left: 0;
position: absolute;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover span.text-content {
opacity: 1;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.team span p {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 14px;
color: #a5a5a5;
}
.social-icon {
font-size: 12px;
color: #fff;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.social-icon-holder {
border: 2px solid #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: table;
}
.social-icon-holder:hover {
background-color: #fff;
cursor: pointer;
}
.social-icon-holder:hover .social-icon {
color: #272727;
cursor: pointer;
-webkit-transition: color 0.5s ease;
}
Wrap a <p> tag around the team members name to make it a block element and essentially put it on a new line.
Then, in .social-icon-holder{
change
display:table;
to
display:inline-block;
or
display:inline-table;
JsFiddle
For this JsFiddle, I jut used a placeholder background image.
To get the social icons center, I did this:
.social-icon {
font-size: 12px;
color: #fff;
display: block;
text-align:center;
width:30px;
height:30px;
}
JsFiddle
you have to remove display :table from the class .social-icon-holder and then you may add display: table-cell; property.
also to align the icons inside the circle you can add font-size and a little bit padding.
HEre I've just added for facebook icon, but you can apply it on .social-icon so apply for all icons.
.ion-social-facebook:before {
content: "\f231";
font-size: 2em; /*Added line this will increase the icon size*/
padding-left: .4em;
}
from my comment: http://jsfiddle.net/h7kJS/ full result : http://jsfiddle.net/h7kJS/2/embedded/result/
.social-icon-holder can be displayed as inline-table (inline-block+line-height works too).
Image should be in absolute under .text-content to make things easier :below: update of your CSS (where .team was removed for .img-list )
/* =Team
-------------------------------------------------------------- */
.img-list {/* update */
padding: 180px 0 180px 0;
}
.img-list img {/* update */
width: 100%;
height: 100%;
position:absolute;/* update */
z-index:0;/* update */
}
ul.img-list {
list-style-type: none;
padding: 0;
}
ul.img-list li {
display: inline-block;
position: relative;
height: 350px;
width:350px;/* update */
}
span.text-content {
background: rgba(39,39,39,0.75);
color: white;
cursor: pointer;
display: table;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
height:100%;
width:100%;
}
ul.img-list li:hover span.text-content {
opacity: 1;
transition: opacity 500ms;
position:relative;/* update */
}
.team span p {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 14px;
color: #a5a5a5;
}
.social-icon {
font-size: 12px;
color: #fff;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.social-icon-holder {
border: 2px solid #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: inline-table;/* update */
}
.social-icon-holder:hover {
background-color: #fff;
cursor: pointer;
}
.social-icon-holder:hover .social-icon {
color: #272727;
cursor: pointer;
transition: color 0.5s ease;
}
Is it ok ? try this code
.social-icon-holder {
border: 2px solid #FFFFFF;
border-radius: 50%;
height: 30px;
width: 30px;
display: block;
margin: 0 auto;
}
Try doing this:
<span>
<div class="social">
<div class="social-icon-holder">
<span class="ion-social-twitter social-icon"></span>
</div>
<div class="social-icon-holder">
<span class="ion-social-twitter social-icon"></span>
</div>
<div class="social-icon-holder">
<span class="ion-social-twitter social-icon"></span>
</div>
</div>
</span>
--- stylesheet --
.social div{
display: inline-block;
}
.social-icon{
padding: 8px 10px;
}