I'm well aware that this is a recurring question. I've checked my code but as far as I can see it should work. It should work without using media queries or vw.(I think)
The intention: Having an image and when I hover over it a text appears.
The problem: The text appears, but it is not responsive.
Please let me know what should I do differently.
Thank you for your time.
HTML:
<section id="recent-news">
<div class="container">
<div class="center wow fadeInDown">
<h2>Recent News</h2>
<h3 class="lead">The latest news about the school, research, students and more.</h3>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-3">
<div class="recent-news-wrap">
<img class="img-responsive" src="images/portfolio/recent/item1.png" alt="">
<div class="overlay">
<div class="recent-news-inner">
<h3 class = "text-center">Mobile Development </h3>
<p>We lead the field. Read more about the latest updates in this field.</p>
<a class="preview" href="images/portfolio/full/item1.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
CSS:
#recent-news .col-xs-4.col-sm-4.col-md-3{
padding: 8px;
}
#recent-news{
padding-bottom: 70px;
}
.recent-news-wrap {
position: relative;
}
.recent-news-wrap img{
width: 100%;
}
.recent-news-wrap .recent-news-inner{
top: 0;
background: transparent;
opacity: .8;
width: 100%;
border-radius: 0;
margin-bottom: 0;
}
.recent-news-wrap .recent-news-inner h3{
margin: 10px 0;
}
.recent-news-wrap .recent-news-inner h3 a{
font-size: 24px;
color: #fff;
}
.recent-news-wrap .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: #3579DC;
color: #fff;
vertical-align: middle;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
padding: 30px;
text-align: center;
}
.recent-news-wrap .overlay .preview {
bottom: 0;
display: inline-block;
height: 35px;
line-height: 35px;
border-radius: 0;
background: transparent;
text-align: center;
color: #fff;
}
.recent-news-wrap:hover .overlay {
opacity: 1;
}
By responsive I am guessing you want the overlay to fit on the page.
Use width: calc() inside of .recent-news-wrap .overlay {} like this:
.recent-news-wrap .overlay {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 60px);
height: 100%;
opacity: 0;
border-radius: 0;
background: #3579DC;
color: #fff;
vertical-align: middle;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
padding: 30px;
text-align: center;
}
See fiddle: https://jsfiddle.net/DIRTY_SMITH/2xzj4dqo/1/
Related
When I click my <a> tag for the popup box, the images in the background (with overlay effects) are glowing up, and I don't know why. If anybody know something I write the code under here.
As you can see I've put href to #popup1 in the first <a> tag, and it opens the popup box, but in the background you can see the image like glowing, the border too.
I've changed the display tag and other CSS tags, but nothing.
Here is the Codepen.
the problem is actually you add pop-up before container 2 so that's why it is glowing.
So, if you dont want to make this glow just add your pop-up division after both
containers like this.
Dont change your Css. you just have to change position of divisions like this
<div class="container1" style="cursor:default;">
<div class="container2">
<div class="content">
<a id="ant" href="#popup1" onclick="show('popup2')">
<div class="content-overlay"></div>
<img class="content-image" src="https://i.postimg.cc/5tNkjkV5/2.png" style="z-index: 0;height: 200px;width: 330px;border:2px solid rgb(205,144,76);padding:0;">
<div class="content-details fadeIn-bottom" style="background-size:cover;">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif;">ANTIPASTI</h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
<div class="container2">
<div class="content">
<a id="prim">
<div class="content-overlay"></div>
<img class="content-image" src="https://i.postimg.cc/5tNkjkV5/2.png" style="border:2px solid rgb(205,144,76);padding:0; height:200px; width:330px;">
<div class="content-details fadeIn-bottom">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif;"> PRIMI PIATTI </h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
</div>
<div id="popup1" class="popup">
×
<h2>The Popup Has Arrived</h2>
<p>QUESTI SONO GLI ANTIPASTI</p>
</div>
<a href="#ant" class="close-popup"></a
It depends on the order of your HTML-Elements. This example will fix the problem
.container1 {
display: flex;
width: 100%;
flex-wrap: wrap;
margin-top: 110px;
align-content: space-around;
justify-content: center;
transition: all 0.2s linear;
}
.container1 > div {
padding: 40px;
justify-content: center;
}
*,
*:before,
*:after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.main-title {
color: #2d2d2d;
text-align: center;
text-transform: capitalize;
padding: 0.7em 0;
}
.container {
padding: 1em 0;
float: left;
width: 50%;
}
#media screen and (max-width: 640px) {
.container {
display: block;
width: 100%;
}
}
#media screen and (min-width: 900px) {
.container {
width: 33.33333%;
}
}
.container .title {
color: #1a1a1a;
font-family: 'Roboto', sans-serif;
text-align: center;
margin-bottom: 10px;
}
.content {
position: relative;
width: 100%;
max-width: 400px;
height: 100%;
margin: auto;
overflow: hidden;
transition: transform 0.4s;
}
.content .content-overlay {
/* background: rgba(70,34,0);*/
background: rgba(214, 142, 60, 70%);
/* background: rgb(214,142,60);*/
position: absolute;
height: 97%;
width: 100%;
left: 30px;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.content:hover .content-overlay {
opacity: 0.5;
}
.content-details {
position: absolute;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.content:hover .content-details {
top: 50%;
left: 50%;
right: 50%;
opacity: 1;
}
.content-details h3 {
color: #fff;
font-weight: 500;
text-align: center;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
padding-left: 20px;
text-transform: uppercase;
}
.content-details p {
color: #fff;
font-size: 0.8em;
text-align: center;
padding-left: 20px;
}
.fadeIn-bottom {
top: 80%;
}
.fadeIn-top {
top: 20%;
}
.fadeIn-left {
left: 20%;
}
.fadeIn-right {
left: 80%;
}
h1 {
font-size: 3em;
text-align: center;
color: #00898e;
margin: 0;
padding: 30vh 0 1em;
}
h2 {
text-align: center;
white-space: nowrap;
color: #00898e;
}
a {
text-decoration: none;
color: #fff;
}
p {
text-align: left;
}
.btn {
display: inline-block;
padding: 10px 20px;
border: 2px solid #00898e;
border-radius: 10px;
transition: background 0.3s;
}
.btn:hover {
background: #00898e;
}
.popup {
position: fixed;
padding: 10px;
max-width: 500px;
border-radius: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.9);
visibility: hidden;
opacity: 0;
/* "delay" the visibility transition */
-webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
transition: opacity 0.5s, visibility 0s linear 0.5s;
z-index: 1;
}
.popup:target {
visibility: visible;
opacity: 1;
/* cancel visibility transition delay */
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.popup-close {
position: absolute;
padding: 10px;
max-width: 500px;
border-radius: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.9);
}
.popup .close {
position: absolute;
right: 5px;
top: 5px;
padding: 5px;
color: #000;
transition: color 0.3s;
font-size: 2em;
line-height: 0.6em;
font-weight: bold;
}
.popup .close:hover {
color: #00e5ee;
}
.close-popup {
background: rgba(0, 0, 0, 0.7);
cursor: default;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
visibility: hidden;
/* "delay" the visibility transition */
-webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
transition: opacity 0.5s, visibility 0s linear 0.5s;
}
.popup:target + .close-popup {
opacity: 1;
visibility: visible;
/* cancel visibility transition delay */
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
<div class="container1" style="cursor: default">
<div class="container2">
<div class="content">
<a id="ant" href="#popup1" onclick="show('popup2')">
<div class="content-overlay"></div>
<img
class="content-image"
src="https://i.postimg.cc/5tNkjkV5/2.png"
style="z-index: 0; height: 200px; width: 330px; border: 2px solid rgb(205, 144, 76); padding: 0"
/>
<div class="content-details fadeIn-bottom" style="background-size: cover">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif">ANTIPASTI</h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
<div class="container2">
<div class="content">
<a id="prim">
<div class="content-overlay"></div>
<img
class="content-image"
src="https://i.postimg.cc/5tNkjkV5/2.png"
style="border: 2px solid rgb(205, 144, 76); padding: 0; height: 200px; width: 330px"
/>
<div class="content-details fadeIn-bottom">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif">PRIMI PIATTI</h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
<!-- The popup should be entered as the last element so that it overlays the other elements -->
<div id="popup1" class="popup">
×
<h2>The Popup Has Arrived</h2>
<p>QUESTI SONO GLI ANTIPASTI</p>
</div>
</div>
So I'm trying to have an underline that goes the width of each text. E.g. I have headers "Team" and "Schedule", and I want the underline to go the full length of each word despite them being different lengths. This is my current code (I've included most all of the code):
html,
body {
margin: 0;
}
.menu {
position: relative;
transition: 0.3s;
z-index: 2;
}
.change .menu {
background-color: white;
width: 60vh;
height: 100vh;
color: black;
position: absolute;
top: -10px;
left: -30px;
z-index: 2;
box-shadow: 0px 8px 16px 0px;
}
.header {
position: fixed;
font-size: 20px;
top: 8px;
left: 16px;
font-family: 'Bebas Neue', cursive;
text-align: left;
color: black;
padding: 10px;
}
.change .content {
position: relative;
}
.menu a {
opacity: 0%;
}
.change .menu a {
opacity: 100%;
color: black;
text-decoration: none;
display: block;
position: relative;
left: 100px;
bottom: -50px;
font-size: 30px;
font-family: 'Bebas Neue', cursive;
z-index: 2;
}
.content h3 {
opacity: 0%;
}
.underbar {
position: relative;
}
.underbar:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 0px;
right: 0;
background: #24478f;
transition: width .5s ease;
-webkit-transition: width .5s ease;
}
. .underbar:hover:after {
width: 12%;
left: 0;
background: #24478f;
}
.sub_underbar {
position: relative;
}
.sub_underbar:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #ffcc00;
transition: width .5s ease;
-webkit-transition: width .5s ease;
}
.sub_underbar:hover:after {
width: 38% left: 0;
background: #ffcc00;
}
<div class="container">
<img src="team_sunset.JPG" alt="Team Picture" style="width:100%;">
<div class="centered" style="font-size:20vw;">UMWSC</div>
<div class="header" onclick="myFunction(this)">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="menu" id="menu_scroll">
<div class="content">
HOME
<h3 class="sub_underbar">MISSION STATEMENT</h3>
<h3 class="sub_underbar">CONTACT US</h3>
TEAM
<h3 class="sub_underbar">ROSTER</h3>
<h3 class="sub_underbar">LEADERSHIP</h3>
<h3 class="sub_underbar">SCHEDULE</h3>
<h3 class="sub_underbar">STATS</h3>
NEWS
<h3 class="sub_underbar">GALLERY</h3>
<h3 class="sub_underbar">BLOG</h3>
GET INVOLVED
<h3 class="sub_underbar">MERCH</h3>
<h3 class="sub_underbar">DONATE</h3>
<h3 class="sub_underbar">PARTNER WITH US</h3>
<h3 class="sub_underbar">WORK WITH US</h3>
MORE INFO
<h3 class="sub_underbar">FORMS</h3>
<h3 class="sub_underbar">FAQS</h3>
</div>
</div>
<div id="scroll_header">
<h4>UMWSC</h4>
</div>
</div>
</div>
I think currently the width is dependent on some parent feature because when you hover to the right of the text, there's a specific spot that "triggers" the animation of the underline to occur.
I'm sure there's a lot wrong with my previous code that might be causing this current issue. Any help would be greatly appreciated! Thank you.
EDIT: The picture shows how the underline goes past the width I want it to go, I just want it to be the length of the word 'HOME'. drop-down content picture
If I'm understanding this correctly you want the main menu titles underline to span across the biggest item in that group of items. If so try this:
a {
text-decoration: none;
}
.menu {
position: relative;
transition: 0.3s;
z-index: 2;
}
.change.menu {
background-color: white;
width: 60vh;
height: 100vh;
color: black;
position: absolute;
top: -10px;
left: -30px;
z-index: 2;
box-shadow: 0px 8px 16px 0px;
}
.header {
position: fixed;
font-size: 20px;
top: 8px;
left: 16px;
font-family: 'Bebas Neue', cursive;
text-align: left;
color: black;
padding: 10px;
}
.change.content {
position: relative;
}
.underbar {
position: relative;
}
.underbar:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 0px;
right: 0;
background: #24478f;
transition: width .5s ease;
-webkit-transition: width .5s ease;
}
.underbar:hover:after {
width: 100%;
left: 0;
background: #24478f;
}
.sub_underbar {
position: relative;
}
.sub_underbar:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #ffcc00;
transition: 100% .5s ease;
-webkit-transition: 100% .5s ease;
}
.sub_underbar:hover:after {
width: 38% left: 0;
background: #ffcc00;
}
<div class="container">
<div class="header" onclick="myFunction(this)">
<div class="menu" id="menu_scroll">
<div class="content-holder">
<div class="content">
HOME
<h3 class="sub_underbar">MISSION STATEMENT</h3>
<h3 class="sub_underbar">CONTACT US</h3>
</div>
<div class="content">
TEAM
<h3 class="sub_underbar">ROSTER</h3>
<h3 class="sub_underbar">LEADERSHIP</h3>
<h3 class="sub_underbar">SCHEDULE</h3>
<h3 class="sub_underbar">STATS</h3>
</div>
<div class="content">
NEWS
<h3 class="sub_underbar">GALLERY</h3>
<h3 class="sub_underbar">BLOG</h3>
</div>
<div class="content">
GET INVOLVED
<h3 class="sub_underbar">MERCH</h3>
<h3 class="sub_underbar">DONATE</h3>
<h3 class="sub_underbar">PARTNER WITH US</h3>
<h3 class="sub_underbar">WORK WITH US</h3>
</div>
<div class="content">
MORE INFO
<h3 class="sub_underbar">FORMS</h3>
<h3 class="sub_underbar">FAQS</h3>
</div>
</div>
</div>
<div id="scroll_header">
<h4>UMWSC</h4>
</div>
</div>
</div>
I have a popup in which I made a toggle with the help of pure CSS. Now if I run The popup and move my mouse at the uppermost or the lowermost part of the window the popup start disappear. I am using 0% JAVASCRIPT inside my popup code and can't find what was a reason in the code.
here is the issue:https://imgur.com/a/wHjHB7A
focus on the mouse cursor! Also, I am looking a way to open a popup at the page load without js
POPUP code:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target,.modalDialog:hover {
opacity: 1;
pointer-events: auto;
}
.modalDialog>#__spookyPopup {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #fff);
background: -o-linear-gradient(#fff, #999);
}
.profile_container {
height: 160px;
width: 400px;
background: #;
display: inline-block;
}
.profile_div {
height: 120px;
width: 130px;
margin-top: 20px;
margin-left: 130px;
background: #ddd;
border: 1px solid grey;
}
.head_div {
min-height: 12px;
width: 100%;
}
.priv_cont {
height: 90px;
width: 400px;
background: #;
display: inline-block;
}
.priv_head {
height: 60px;
width: 330px;
margin-left:30px;
margin-top:15px;
background: #;
}
.clicker {
display: inline-block;
width: 100px;
height: 50px;
background-color: ;
color: #FFF;
}
.clicker:hover{border-bottom: 2px solid red ;
}
#click_styling
{
margin-top:20px;
height: 50px;
width: 197px;
text-align:center;
font-size:20px;color:#000;
line-height:50px;
text-decoration:none;
cursor:default;"
}
.clicker.hidden {
display: none;
}
.hiddendiv {
height: 0px;
background-color: green;
overflow: hidden;
transition: height 0.5s;
}
.social {
height: 160px;
width: 400px;
background: #ccc;
display: inline-block;
}
.social_link {
height: 60px;
width: 330px;
margin-left:30px;
margin-top:15px;
background: #ddd;
border: 1px solid grey;
}
.hiddendiv.nr2 {
background-color: red;
}
#showdiv1:target~div a[href="#showdiv1"],
#showdiv2:target~div a[href="#showdiv2"] {
display: none;
}
#showdiv1:target~div a[href="#hidediv1"],
#showdiv2:target~div a[href="#hidediv2"] {
display: inline-block;
}
#showdiv1:target~div .hiddendiv.nr1,
#showdiv2:target~div .hiddendiv.nr2 {
height: 150px;
}
Open Modal
<div id="__spooky_auth_popup" class="modalDialog">
<div id="__spookyPopup">
X
<div class="profile_container">
<div class="profile_div"></div>
</div>
<div class="head_div">
<p style="margin:0;padding:0;text-align:center;
font-size:25px;color:#8d8686;">
<I>Hey, please login to access your private content.</I>
</p>
</div>
<div id="showdiv1"></div>
<div id="showdiv2"></div>
<div>
SOCIAL
SOCIAL
MANUAL
MANUAL
<div class="hiddendiv nr1">
<div class="social">
<div class="social_link">
<div data-html="allow" >
<iframe id="iFrame1" style="border: 0px; display: block" height="400" class="spoooky-auth" src="https://api.spooo.ky/auth/facebook" border="0"></iframe>
</div>
<!-- End of facebook button -->
</div>
<div class="social_link">
<!-- Optional: Linkedin button starts here -->
<div data-html="allow" >
<iframe style="border: 0px; display: inline-block" class="spoooky-auth" src="https://api.spooo.ky/auth/linkedin" border="0"></iframe>
</div>
<!-- End of linkedin button -->
</div>
</div>
</div>
<div class="hiddendiv nr2">y</div>
</div>
<div class="priv_cont">
<div class="priv_head"><p style="margin:0;padding:0;text-align:center;font-size:18px;color:#000;">
<I>By continuing to the content you agree with the cookie
and privacy policies.</I> </p>
</div>
</div>
Any Idea?what was the issue?
Any input is apprecheated.
Thanks in Advance.
It appears your modalDialog box by default has an opacity of zero. Upon hovering it the opacity goes to one. Everything else is also nested in this div that upon no longer hovering the div, it all disappears.
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target,.modalDialog:hover {
opacity: 1;
pointer-events: auto;
}
I am working on a menu with CSS where when I point on the third item in the first row of the menu, the item will be bigger and then the second row will be messy. I tried to change the margins of the items and the sizes too, but it didn't work with me. also, I tried to change the padding of the menu body and the size, but nothing worked too.
I hope there is someone who could help.
thank you in advance
https://jsfiddle.net/a1dzbg1v/1/
here are HTML code and CSS
#menu {
padding: 0 10px;
}
.menu {
padding: 3px 5px;
margin: 0 5px;
position: relative;
display: inline-block;
border: 2px solid black;
border-radius: 10px;
float: right;
cursor: pointer;
}
.menu:hover {
background: #f9e8b5;
}
.menu-content {
position: absolute;
right: 0px;
width: 273px;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
text-align: center;
border: 1px solid black;
border-radius: 10px;
color: black;
background: linear-gradient(to bottom, #d3bd7b 0%,#ead28a 50%);
height: 0px;
padding: 40px 5px 20px 5px;
-webkit-transition: height 2s ease-out; /* For Safari 3.1 to 6.0 */
transition: height 2s ease-out;
}
.menu-content:hover {
height: auto;
padding: 45px 5px 25px 5px;
-webkit-transition: height 2s ease-out; /* For Safari 3.1 to 6.0 */
transition: height 2s ease-out;
}
.menu .menu-content {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;
}
.menu:hover .menu-content {
display: block;
visibility: visible;
opacity: 1;
}
.menu-header {
position: absolute;
top: 0px;
left: 0px;
width: 283px;
height: 40px;
background: black;
margin: 0px;
padding: 0px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.menu-header p{
color: #ead28a;
font-weight: bold;
font-size: 20px;
margin: 8px;
}
.menu-footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 283px;
height: 20px;
background: black;
margin: 0px;
padding: 0px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.menu-footer p{
color: #ead28a;
margin: 4px;
}
.menu-item {
visibility: hidden;
list-style-type: none;
height: 60px;
width: 60px;
margin: 15px;
float: left;
border-radius: 10px;
-webkit-transition: width 2s, height 2s, margin 2s, visibility 2s, opacity 1s linear; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, margin 2s, visibility 2s, opacity 1s linear;
}
.menu-content .menu-item{
}
.menu-content:hover .menu-item {
visibility: visible;
opacity: 1;
}
.menu-item:hover {
height: 85px;
width: 85px;
margin: 0px;
background: #f9e8b5;
padding: 0px;
}
.menu-item a {
height: 60px;
width: 60px;
display: block;
text-decoration: none;
border-radius: 10px;
margin: 0px;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: linear-gradient(to bottom, #d3bd7b 0%,#ead28a 50%);
transform: scale(1);
-webkit-transition: width 2s, height 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s;
}
.menu-item a:hover {
height: 85px;
width: 85px;
display: block;
margin: 0px;
background: #f9e8b5;
padding: 0px;
transform: scale(1);
}
.menu-item a p {
visibility: hidden;
opacity: 0;
margin: 0px;
-webkit-transition:visibility 2s, opacity 1s linear; /* For Safari 3.1 to 6.0 */
transition: visibility 2s, opacity 1s linear;
-webkit-transition-delay: 0.5s; /* Safari */
transition-delay: 0.5s;
}
.menu-item:hover.menu-item a p {
font-size: 16px;
visibility: visible;
opacity: 1;
}
.menu-item a img {
margin-top: 10px;
}
.menu-item:hover.menu-item a img {
margin-top: 20px;
}
<div id="menu">
<div class="menu">
<spin><img class="icon" src="#" /></spin>
<div class="menu-content">
<div class="menu-header">
<p>User Menu</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 1</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 2</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 3</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 4</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 5</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 6</p>
</div>
<div class="menu-footer">
<p><?php echo date("m-d-Y :: H:i:s");?></p>
</div>
</div>
</div>
</div>
I don't know where the rule about the transformation matrix is coming from; in an element inspector, it shows up in "Computed" styles, but I don't see any rule with a transform matrix in your actual CSS.
That said, I ran your code snippet and the only way I could figure out to fix your problem was to add
clear: left;
to your fourth menu-item div (the Meals one). You can do that the usual way in your stylesheet by calling nth-child or giving that element its own class name. You could also do an inline style but generally I know that's not recommended.
I'm sure there's a better way to fix this that wouldn't involve applying this to only one of your menu item divs, but it works.
I have a progress bar that uses arrows but the only way I know how to make it is using pixels. So I am wondering if there is a way to create this progress bar using pixels, and then change its size according to the page. I have looked at similar questions, but none pertain to the type of element I am creating. Attached is what the bar currently looks like, and I want to be able to make it adaptable to the screen size.
.containerr {
font-family: 'Lato', sans-serif;
float: left;
position: relative;
width: 70%;
height: 100%;
}
.wrapperr {
float: left;
width: 70%;
height: 100%;
position: relative;
/*overflow:auto;*/
}
.pull-right {
}
a:hover {
color: #999;
}
/* Breadcrups CSS */
.arrow-steps {
zoom: 1.4;
position: relative;
display: inline-flex;
vertical-align: top;
}
.arrow-steps .step {
font-size: 100%;
text-align: center;
color: #666;
cursor: default;
margin: 0 3px;
padding: 10px 10px 10px 30px;
min-width: 180px;
float: left;
position: relative;
background-color: #d9e3f7;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: background-color 0.2s ease;
}
.arrow-steps .step:after, .arrow-steps .step:before {
content: " ";
position: absolute;
top: 0;
right: -17px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 19px solid transparent;
border-left: 17px solid #d9e3f7;
z-index: 2;
transition: border-color 0.2s ease;
}
.arrow-steps .step:before {
right: auto;
left: 0;
border-left: 17px solid #333;
z-index: 0;
}
.arrow-steps .step:first-child:before {
border: none;
}
.arrow-steps .step:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.arrow-steps .step span {
position: relative;
}
.arrow-steps .step span:before {
opacity: 0;
content: "✔";
position: absolute;
top: -2px;
left: -20px;
}
.arrow-steps .step.done span:before {
opacity: 1;
-webkit-transition: opacity 0.3s ease 0.5s;
-moz-transition: opacity 0.3s ease 0.5s;
-ms-transition: opacity 0.3s ease 0.5s;
transition: opacity 0.3s ease 0.5s;
}
.arrow-steps .step.current {
color: #fff;
background-color: #23468c;[![enter image description here][1]][1]
}
html
<div class="containerr">
<div class="wrapperr">
<div class="arrow-steps clearfix">
<div runat="server" id="first" class="step">
<asp:LinkButton ID="machineLink" CssClass="arrowTexts" runat="server" OnClick="machineLink_Click" OnClientClick="getCoordinates()">Safety</asp:LinkButton>
</div>
<div runat="server" id="second" class="step">
<asp:LinkButton ID="estopLink" CssClass="arrowTexts" runat="server" OnClick="estop_Click" OnClientClick="getCoordinates()">Estop Reset
</asp:LinkButton>
</div>
<div runat="server" id="third" class="step">
<asp:LinkButton ID="startLink" CssClass="arrowTexts" runat="server" OnClick="start_Click" OnClientClick="getCoordinates()">Start</asp:LinkButton>
</div>
</div>
</div>
</div>
You can utilize vh vw vmin and vmax to make your progress-bar responsive.
See this codepen