I have three images that I am trying to align with display: flex, I see that those div's interfere with each other, I just can't get them to go side by side with another, so those divs overlap.
I made a JSFiddle to explain it better here.
.top-section-hover {
display: flex;
padding-top: 10em;
justify-content: center;
flex-grow: 2;
text-align: center;
text-transform: uppercase;
font-weight: bold;
max-width: 96%;
}
.top-section-hover img {
position: relative;
top: 0;
transition: top ease 0.5s;
left: 0;
}
.top-section-hover img.active {
top: -30px;
transition: all 0.5s ease;
}
.cover-title {
font-weight: bold;
}
.top-section-hover span.active2 {
color: white;
border-bottom: 3px solid white;
transition: 0.5s all;
}
<div class="top-section-hover">
<span class="hover-cover-left">
<a href="#" class="cover-left-content">
<img src="https://www.4metri.lv/upload/iblock/95c/95c14a70011a4c90c37656d71c1c7f43.png" alt="" class="cover-img">
<span class="cover-title">Birojam</span>
</a>
</span>
<span class="hover-cover-middle">
<a href="#" class="cover-left-content">
<img src="https://www.4metri.lv/upload/iblock/28e/28e0b8c52db48dd56e0c0bfcccb445ff.png" alt="" class="cover-img">
<span class="cover-title">Mājai</span>
</a>
</span>
<span class="hover-cover-right">
<a href="#" class="cover-left-content">
<img src="http://4metri.lan/public/..\resources\images\4metribildelabi.png" alt="" class="cover-img">
<span class="cover-title">Pasākumiem</span>
</a>
</span>
</div>
</div>
This is the desired state, they all ling up side by side
Are you looking like this?
.top-section-hover {
display: flex;
padding-top: 10em;
justify-content: space-around;
flex-grow: 2;
text-align: center;
text-transform: uppercase;
font-weight: bold;
max-width: 96%;
}
.top-section-hover img {
position: relative;
top: 0;
transition: top ease 0.5s;
left: 0;
width: 100%;
height: 100px;
}
.top-section-hover img.active {
top: -30px;
transition: all 0.5s ease;
}
.cover-title {
font-weight: bold;
}
.top-section-hover span.active2 {
color: white;
border-bottom: 3px solid white;
transition: 0.5s all;
}
<div class="top-section-hover">
<span class="hover-cover-left">
<a href="#" class="cover-left-content">
<img src="https://www.4metri.lv/upload/iblock/95c/95c14a70011a4c90c37656d71c1c7f43.png" alt="" class="cover-img">
<span class="cover-title">Birojam</span>
</a>
</span>
<span class="hover-cover-middle">
<a href="#" class="cover-left-content">
<img src="https://www.4metri.lv/upload/iblock/28e/28e0b8c52db48dd56e0c0bfcccb445ff.png" alt="" class="cover-img">
<span class="cover-title">Mājai</span>
</a>
</span>
<span class="hover-cover-right">
<a href="#" class="cover-left-content">
<img src="https://www.4metri.lv/upload/iblock/95c/95c14a70011a4c90c37656d71c1c7f43.png" alt="" class="cover-img">
<span class="cover-title">Pasākumiem</span>
</a>
</span>
</div>
.top-section-hover {
display: flex;
padding-top: 10em;
justify-content: center;
flex-grow: 2;
text-align: center;
text-transform: uppercase;
font-weight: bold;
max-width: 96%;
align-items:center
}
Related
I am trying to add a close effect with Keyframe css to the dropdown menu. I have succeeded with the opening, but I cannot do the same with the close. If you take a look you see the animation on entry, but on exit the menu simply disappears.
Sorry but I'm relatively new, someone kindly explain to me what I'm doing wrong?
I know that I can achieve the same result also with Javascript, but I would like to obtain the result only with css and understand if this is possible.
Updated Snippet: I was looking for an alternative to visibility property because even with hidden menu I have the "ghost container" in front of other elements. I was thinking about display none to block and keyframe animation, but this did not allow me to add a closing effect. Anyway I kept visibility and solved the "ghost container" with height property.
var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
var x = document.getElementById("mts_menu");
if (x.classList.toggle ("show")) {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Account</span>';
} else {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars"></i><span class="txt_button">Account</span>';
}
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover > a {
color: #2E323A;
}
/*Icon Button Toggle Menu*/
.user_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
background: #282c33!important;
font-weight: 500!important;
font-size: 13px!important;
}
.icn_button {
margin: 0;
}
.icn_button:before, .icn_button:after {
margin: 0;
}
.txt_button {
margin-left: 10px;
}
/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_menu_container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.dropdown_box {
position: absolute;
margin-top: 17px;
}
.mnu_padding {
padding: 20px;
}
.mts_dropdown_content {
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 999;
position: relative;
visibility: hidden;
opacity: 0;
top: 50px;
height: 0;
transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s;
}
.mts_dropdown_content.show {
height: 100%;
visibility: visible;
opacity: 1;
top: 0;
transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s;
}
<button onclick="userMenu()" class="user_menu_button">
<i class="icn_button fa-solid fa-bars"></i>
<span class="txt_button">Account</span>
</button>
<div class="mts_menu_container">
<div class="dropdown_box">
<div id="mts_menu" class="mts_dropdown_content">
<div class="mnu_padding">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
</div>
Original Snippet
var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
var x = document.getElementById("mts_menu");
if (x.classList.toggle ("show")) {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Account</span>';
} else {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars"></i><span class="txt_button">Account</span>';
}
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover > a {
color: #2E323A;
}
/*Icon Button Toggle Menu*/
.user_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
background: #282c33!important;
font-weight: 500!important;
font-size: 13px!important;
}
.icn_button {
margin: 0;
}
.icn_button:before, .icn_button:after {
margin: 0;
}
.txt_button {
margin-left: 10px;
}
/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_menu_container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.dropdown_box {
position: absolute;
margin-top: 17px;
}
.mnu_padding {
padding: 20px;
}
.mts_dropdown_content {
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 999;
position: relative;
display: none;
animation: fade_in_hide 0.2s;
}
.mts_dropdown_content.show {
display: block;
animation: fade_in_show 0.2s;
}
#keyframes fade_in_show {
0% {
opacity: 0;
top: 50px;
}
100% {
opacity: 1;
top: 0;
}
}
#keyframes fade_in_hide {
0% {
opacity: 1;
top: 0;
}
100% {
opacity: 0;
top: 50px;
}
}
<button onclick="userMenu()" class="user_menu_button">
<i class="icn_button fa-solid fa-bars"></i>
<span class="txt_button">Account</span>
</button>
<div class="mts_menu_container">
<div class="dropdown_box">
<div id="mts_menu" class="mts_dropdown_content">
<div class="mnu_padding">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
</div>
Since you don't want to go the JS route, transitions would be easier here. However, you can't transition display so you'll need to swap that out for visibility and have your menu display set to block from the start and just hide it with visibility and opacity.
var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
var x = document.getElementById("mts_menu");
if (x.classList.toggle("show")) {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Account</span>';
} else {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars"></i><span class="txt_button">Account</span>';
}
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item>a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover>a {
color: #2E323A;
}
/*Icon Button Toggle Menu*/
.user_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
background: #282c33 !important;
font-weight: 500 !important;
font-size: 13px !important;
}
.icn_button {
margin: 0;
}
.icn_button:before,
.icn_button:after {
margin: 0;
}
.txt_button {
margin-left: 10px;
}
/*Icon Items Menu*/
.icn_menu:before,
.icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_menu_container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.dropdown_box {
position: absolute;
margin-top: 17px;
}
.mnu_padding {
padding: 20px;
}
.mts_dropdown_content {
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: -1;
opacity: 0;
top: 50px;
position: relative;
display: block;
visibility: none;
transition: opacity, top, 0.2s linear;
}
.mts_dropdown_content.show {
opacity: 1;
top: 0px;
z-index: 999;
visibility: visible;
transition: opacity, top, 0.2s linear;
}
#keyframes fade_in_show {
0% {
opacity: 0;
top: 50px;
}
100% {
opacity: 1;
top: 0;
}
}
#keyframes fade_in_hide {
0% {
opacity: 1;
top: 0;
}
100% {
opacity: 0;
top: 50px;
}
}
<button onclick="userMenu()" class="user_menu_button">
<i class="icn_button fa-solid fa-bars"></i>
<span class="txt_button">Account</span>
</button>
<div class="mts_menu_container">
<div class="dropdown_box">
<div id="mts_menu" class="mts_dropdown_content">
<div class="mnu_padding">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
</div>
I cannot understand how, in my case, possible to properly positioned the menu by creating only one class menu, instead of menu_left and menu_right classes.
How can I optimize css here?
Here's code example:
html:
<div class="menu_left" >
<div class="menu__item">
<span class="menu__item__link__text">SHOP</span>
</div>
<div class="menu__item">
<span class="menu__item__link__text">ABOUT</span>
</div>
</div>
<a href="" class="logo">
<img src="assets/sds.jpgf" class="logo__image">
</a>
<div class ="menu_right">
<div class="menu__item">
<span class="menu__item__link__text">CART</span>
</div>
<div class="menu__item">
<span class="menu__item__link__text">EUR</span>
</div>
</div>
Menu Image
css
.menu_left {
background: rgba(0, 0, 0, 0.85);
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
float: left;
width: auto;
opacity: 1;
visibility: visible;
-webkit-transition: none;
-moz-transition: none;
transition: none; }
.menu_right{
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
float: right;
width: auto;
opacity: 1;
visibility: visible;
-webkit-transition: none;
-moz-transition: none;
transition: none; }
}
Try it with Flexbox
See flexbox menu here
HTML
<div class="menu">
<ul>
<li>
Lorem
</li>
<li>
Lorem
</li>
</ul>
<div class="img"> <!-- replace div with the <img src="" alt="" /> tag -->
img here
</div>
<ul>
<li>
Lorem
</li>
<li>
Lorem
</li>
</ul>
</div>
CSS
.menu {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 10px;
background: #ddd;
}
ul {
display: flex;
padding: 0;
list-style: none;
}
a {
padding: 5px 10px;
color: #000;
text-decoration: none;
text-transform: uppercase;
}
.img {
width: 200px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
color: #fff;
}
To optimize CSS when using very similar settings, use three classes instead of two: One common class for both elements which contains all the common settings, and two separate classes for the two elements which contain the different settings:
CSS:
.menu_all {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
width: auto;
opacity: 1;
visibility: visible;
-webkit-transition: none;
-moz-transition: none;
transition: none;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
}
.menu_left {
background: rgba(0, 0, 0, 0.85);
float: left;
}
.menu_right{
float: right;
}
and HTML:
<div class="menu_all menu_left" >
<div class="menu__item">
<span class="menu__item__link__text">SHOP</span>
</div>
<div class="menu__item">
<span class="menu__item__link__text">ABOUT</span>
</div>
</div>
<a href="" class="logo">
<img src="assets/sds.jpgf" class="logo__image">
</a>
<div class ="menu_all menu_right">
<div class="menu__item">
<span class="menu__item__link__text">CART</span>
</div>
<div class="menu__item">
<span class="menu__item__link__text">EUR</span>
</div>
</div>
I'm trying to animate the width of the span inside the an of this link.
The same demo: https://www.khaneyeax.com/en
.lang {
background-color: rgba(255,255,255,0.1);
left: -130px;
top: 400px;
}
.lang a {
padding: 10px;
color: black;
max-width: 0;
display: block;
overflow: hidden;
white-space: nowrap;
transition: max-width 1s ease-in-out;
}
.lang a:hover {
width: 300px;
max-width: 300px;
}
<div id="left">
<img src="https://via.placeholder.com/150">
<div class="position-fixed lang">
Language Persian FA
<a class="english">Language English EN</a>
<a class="search"><i class="fas fa-search"></i> Advanced Search </a>
</div>
</div>
I know the question of overlapping has been answered multiple times, however, I'm trying to place the text on top of the image centred once hovered.
I tried z-index, I tried relative and absolute, decided I'd ask for help.
.flex-container {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
margin: 0;
padding-left: 7%;
padding-right: 7%;
padding-top: 25px;
padding-bottom: 50px;
justify-content: center;
}
.flex-container div {
margin: 0;
position: relative;
margin-bottom: -5px;
font-size: medium;
text-align: center;
z-index: 0;
}
.flex-container div:hover {
filter: brightness(50%);
}
.flex-container div p {
display: none;
}
.flex-container div:hover p {
position: absolute;
color: black;
z-index: 1;
text-align: center;
}
<div>
<a href="Printing/menus.html">
<img src="../Images/menus-01.png" alt="Printing" style="width:100%; height:auto;"/>
</a>
<p>Menus</p>
</div>
You should have set the text CSS first and just then get the hover to show the styles, also, you forgot to set the container styles on your code.
See if that's what you want :
HTML :
<div class="container">
<img src="../Images/menus-01.png" alt="Image" style="width:100%;">
<div class="topTxt">Text on Center/div>
</div>
CSS :
.container {
position: relative;
text-align: center;
}
.topTxt {
position: absolute;
display: none;
top: 0;
left: 50%;
transform: translate(-50%, 0%);
}
.container:hover .topTxt {
display: block;
}
OR use JavaScript :
document.getElementsByClass("container").addEventListener("mouseover", function() {
document.getElementsByClass("topTxt").style.display = "block";
});
Get the following snippet to better view of what you requested :
#container {
max-width: 900px;
margin: 0 auto;
padding: 5px;
font-size: 0;
list-style: none;
background-color: #444;
}
#container li {
display: inline-block;
width: 25%;
vertical-align: middle;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container-cells {
margin: 5px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
display: block;
position: relative;
overflow: hidden;
}
.imgs {
display: block;
width: 100%;
height: auto;
border: none;
filter: brightness(100%);
transition: all 0.3s;
}
#container li:hover .imgs {
filter: brightness(50%);
}
.overlay {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 0px;
margin: auto;
background: #000;
background-size: 50px 50px;
transition: all 0.3s;
}
#container li:hover .overlay {
height: 30px;
}
.title {
display: block;
padding: 5px 30px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
text-align: center;
font-size: 18px;
color: white;
opacity: 0;
transform: translateY(-20px);
transition: all .3s;
}
#container li:hover .title {
transform: translateY(0px);
opacity: 0.9;
}
#media (max-width: 9000px) {
#container li {
width: 25%;
}
}
#media (max-width: 700px) {
#container li {
width: 33.33%;
}
}
#media (max-width: 550px) {
#container li {
width: 50%;
}
}
<ul id="container">
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
</ul>
You just need to put the text before the image, as the image will be the background either way, just add the the text before, then the image and the text will be siblings, not parent and child, so the effect of hover won't affect the child, therefore, the text color will remain without having the filter applied to it.
Maybe the below is what you're looking for?
How to put text over images in html?
The answer suggests using a "div" tag rather than an "img" tag. Here is an example:
.image {
width:400px;
height:400px;
background-image: url(http://lorempixel.com/output/cats-q-c-640-480-4.jpg);
background-size:cover;
}
<div class="image">Text on top of image</div>
Currently I am trying to create some links that look like buttons. It's working fairly well, except I want to be able to align them horizontally. This what I have so far:
.border {
display: table;
width: 220px;
height: 120px;
border: 2px solid #1E5034;
transition: all 250ms ease-out;
box-sizing: border-box;
border-spacing: 10px;
float:left;
}
.border:hover {
border-spacing: 2px;
}
a.btn {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #ffffff;
font: 17.5px sans-serif;
text-decoration: none;
background-color: #1E5034;
line-height: 20px;
margin-bottom: 0;
}
a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited,
a.btn:link {
color: #ffffff;
background-color: #1E5034;
text-decoration: none;
cursor: pointer;
}
<div class="btn-grp">
<div class="border">
<a class="btn" href="#">Some really long text link #1</a>
</div>
<div class="border">
<a class="btn" href="#">Some other really long text link #2</a>
</div>
<div class="border">
<a class="btn" href="#">Some more really really long text link #3</a>
</div>
<div class="border">
<a class="btn" href="#">The last really long text link #4</a>
</div>
</div>
Edit:
If it has display:inline-block; it will mess up with formatting with heights and not center the text.
I'm trying to create something as shown here, but then be able to center this on the page as well.
Thanks!
Support in all browsers including IE.
.btn-grp {
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
width: 80vw;
}
.border {
display: table;
width: 25%;
height: 120px;
border: 2px solid #1E5034;
transition: all 250ms ease-out;
box-sizing: border-box;
border-spacing: 10px;
float: left;
}
.border:hover {
border-spacing: 2px;
}
a.btn {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #ffffff;
font: 17.5px sans-serif;
text-decoration: none;
background-color: #1E5034;
line-height: 20px;
margin-bottom: 0;
}
a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited,
a.btn:link {
color: #ffffff;
background-color: #1E5034;
text-decoration: none;
cursor: pointer;
}
<div class="btn-grp">
<div class="border">
<a class="btn" href="#">Some really long text link #1</a>
</div>
<div class="border">
<a class="btn" href="#">Some other really long text link #2</a>
</div>
<div class="border">
<a class="btn" href="#">Some more really really long text link #3</a>
</div>
<div class="border">
<a class="btn" href="#">The last really long text link #4</a>
</div>
</div>
If you need the 4 div at vertically centered then use:
.btn-grp {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
Because you are using width in px thats why then don't come in a single row...So try to use % width i.e. 25%...
.border {
display: table;
width: 25%;
height: 120px;
border: 2px solid #1E5034;
transition: all 250ms ease-out;
box-sizing: border-box;
border-spacing: 10px;
float: left;
}
.border:hover {
border-spacing: 2px;
}
a.btn {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #ffffff;
font: 17.5px sans-serif;
text-decoration: none;
background-color: #1E5034;
line-height: 20px;
margin-bottom: 0;
}
a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited,
a.btn:link {
color: #ffffff;
background-color: #1E5034;
text-decoration: none;
cursor: pointer;
}
<div class="btn-grp">
<div class="border">
<a class="btn" href="#">Some really long text link #1</a>
</div>
<div class="border">
<a class="btn" href="#">Some other really long text link #2</a>
</div>
<div class="border">
<a class="btn" href="#">Some more really really long text link #3</a>
</div>
<div class="border">
<a class="btn" href="#">The last really long text link #4</a>
</div>
</div>
Well I recommend you to use Flexbox here...It will give you the full control to align the item vertically and horizontally...Also you will need to use :after for the background, as flexbox does not allow border-spacing
.btn-grp {
display: flex;
justify-content: center;
}
.border {
width: 20%;
height: 120px;
border: 2px solid #1E5034;
transition: all 250ms ease-out;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 10px;
}
a.btn {
text-align: center;
color: #ffffff;
font: 16px sans-serif;
text-decoration: none;
line-height: 20px;
margin-bottom: 0;
flex: 1;
}
a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited {
color: #ffffff;
background-color: #1E5034;
text-decoration: none;
cursor: pointer;
}
.border:before {
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #1f5034;
position: absolute;
z-index: -1;
transition: all .3s ease;
transform: scale(0.85);
}
.border:hover:before {
transform: scale(0.95);
}
<div class="btn-grp">
<div class="border">
<a class="btn" href="#">Some really long text link #1</a>
</div>
<div class="border">
<a class="btn" href="#">Some other really long text link #2</a>
</div>
<div class="border">
<a class="btn" href="#">Some more really really long text link #3</a>
</div>
<div class="border">
<a class="btn" href="#">The last really long text link #4</a>
</div>
</div>
Well for IE 8 support use display:inline-block and transform to place the content in center...
.btn-grp {
text-align: center;
font-size: 0;
}
.border {
width: 20%;
height: 120px;
border: 2px solid #1E5034;
transition: all 250ms ease-out;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
position: relative;
padding: 10px;
}
a.btn {
text-align: center;
color: #ffffff;
font: 16px sans-serif;
text-decoration: none;
line-height: 20px;
margin-bottom: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
}
.border:before {
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #1f5034;
position: absolute;
z-index: -1;
transition: all .3s ease;
transform: scale(0.85);
}
.border:hover:before {
transform: scale(0.95);
}
<div class="btn-grp">
<div class="border">
<a class="btn" href="#">Some really long text link #1</a>
</div>
<div class="border">
<a class="btn" href="#">Some other really long text link #2</a>
</div>
<div class="border">
<a class="btn" href="#">Some more really really long text link #3</a>
</div>
<div class="border">
<a class="btn" href="#">The last really long text link #4</a>
</div>
</div>