So I have a tooltip on tumblr and everything about the code is working except the max width, it's stuck at 75px. I've changed it to 250px and 300px and it refuses to stretch with the words in the tooltip.
Code:
a[tooltip]:hover:after {
position: absolute;
z-index: 99999999;
max-width: 300px;
min-width: 60px;
border: 1px solid #bababa;
padding: 6px;
margin: -27px 0px 0px 28px;
background-color: #ffffff;
color: #1a2242;
font-family: arial;
font-size: 7px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: none;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px;
opacity: 1;
content: attr(tooltip);
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
}
#s-m-t-tooltip {
position: absolute;
z-index: 99999999;
max-width: 300px;
min-width: 60px;
border: 1px solid #bababa;
padding: 6px;
margin: -27px 0px 0px 28px;
background-color: #ffffff;
color: #1a2242;
font-family: arial;
font-size: 7px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: none;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px;
opacity: 1;
outline: 0px solid #ddd;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
Link
Any help is appreciated and if you need more information, let me know.
add width: 100%; for your pseudo element, also you can use box-sizing so that the width and height properties set the dimensions of the content rather than the content.
`
a[tooltip]:hover:after {
width: 100%;
box-sizing: border-box;
position: absolute;
z-index: 99999999;
max-width: 300px;
min-width: 60px;
border: 1px solid #bababa;
padding: 6px;
margin: -5px 0 0 28px;
background-color: #ffffff;
color: #1a2242;
font-family: arial;
font-size: 7px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: none;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px;
opacity: 1;
content: attr(tooltip);
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
}
#s-m-t-tooltip {
position: absolute;
z-index: 99999999;
width: 300px;
max-width: 200px;
min-width: 60px;
border: 1px solid #bababa;
padding: 6px;
margin: -27 0 0 28px;
background-color: #ffffff;
color: #1a2242;
font-family: arial;
font-size: 7px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: none;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px;
opacity: 1;
outline: 0px solid #ddd;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
Link
The reason it's not working is because you have a width:100% set on the a:after pseudo-element. That property will set the width of the element to that of it's parent, in this case your a is a child of your <div class="markericon1">. You can see that if you change just the width of <div class="markericon1"> to something higher you will get the result you want.
.markericon1 {
width:300px;
}
Related
I'm working on some buttons that fill with a color when you hover over the button. The transition works perfectly on safari that runs on a MacBook. But when I do the animation on my windows device with Chrome, it has a hiccup on the end with multiple flashes. I have searched around for a solution but I couldn't find any.
.button_slide {
color: black;
border: 2px solid #ffffff;
border-radius: 0px;
padding: 18px 45px;
display: inline-block;
font-family: "Lucida Console", Monaco, monospace;
font-size: 14px;
letter-spacing: 5px;
cursor: pointer;
box-shadow: inset 0 0 0 0 #ffffff;
/* -webkit-transition: ease-out 0.4s !important;
-moz-transition: ease-out 0.4s !important; */
transition: ease-out 0.4s;
}
.slide_diagonal:hover {
box-shadow: inset 400px 50px 0 0 #007ACC;
border: 2px solid #007ACC;
}
#outer {
position: relative;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
width: 364px;
/*margin: 50px auto 0 auto;*/
text-align: center;
}
<div id="outer">
<div class="button_slide slide_diagonal">KLIK HIER</div>
</div>
Reason of hiccup
The answer from DreamTeK helped out to point out the issue. It looks like that when a transform transform: translate(-50%,-50%); is applied to #outer, Chrome will hiccup the animation. The only question that will be left is, why does this cause the issue?
edit: typos, extra information
I wasn't able to pinpoint the exact reason Chrome has issues with the box-transition however I used a differant method that creates the same effect much smoother.
#outer {
width: 220px;
margin: 50px auto;
text-align: center;
}
.button_slide {
position: relative;
color: black;
border: 2px solid #ffffff;
padding: 18px 45px;
display: block;
font: 14px "Lucida Console", Monaco, monospace;
letter-spacing: 5px;
text-decoration: none;
cursor: pointer;
transition: ease-out 0.4s;
width: 100%;
box-sizing: border-box;
}
.button_slide::before {
content: '';
box-shadow: inset 0 0 0 0 #fff;
transition: ease-in-out 0.4s;
border: 2px solid #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
z-index: -1;
}
.slide_diagonal:hover::before {
box-shadow: inset 300px 50px 0 0 #007ACC;
border-color: #007ACC;
}
<div id="outer">
<a class="button_slide slide_diagonal">KLIK HIER</a>
</div>
I love the buttons on this site - https://veronicaromney.com/
I tried copying the CSS from the site but I am not making it work right.
I do use Elementor, I added the code to the theme (for the button) and then the ID to the button, but what I got is that the button block (entire block) got the CSS and did nothing on hover.
Can you help me build these buttons?
Here is the code I have so far that pretty much isn't working for me.
.mmb-btn { -webkit-text-size-adjust: 100%;
box-sizing: border-box;
text-decoration: none;
text-rendering: optimizeLegibility;
position: relative;
color: #fff;
border: 0 none;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1);
background-color: #e4b067;
display: inline-block;
transition: none 0s ease 0s;
text-align: inherit;
line-height: 24px;
border-width: 0px;
margin: 0 auto;
padding: 12px 33px 11px;
letter-spacing: 4px;
font-weight: 400;
font-size: 14px;
}
.mmb-btn:before {
border: 1px solid #000;
top: 7px;
left: 7px;
}
.mmb-btn::after {
bottom: 0;
right: 0;
}
.mmb-btn:before, .mmb-btn:after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: ease;
transition-delay: 0s;
}
.mmb-btn { -webkit-text-size-adjust: 100%;
box-sizing: border-box;
text-decoration: none;
text-rendering: optimizeLegibility;
position: relative;
color: #fff;
border: 0 none;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1);
background-color: #e4b067;
display: inline-block;
transition: none 0s ease 0s;
text-align: inherit;
line-height: 24px;
border-width: 0px;
margin: 0 auto;
padding: 12px 33px 11px;
letter-spacing: 4px;
font-weight: 400;
font-size: 14px;
}
.mmb-btn:before {
border: 1px solid #000;
top: 7px;
left: 7px;
}
.mmb-btn::after {
bottom: 0;
right: 0;
}
.mmb-btn:before, .mmb-btn:after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: ease;
transition-delay: 0s;
}
.mmb-btn:hover:before, .mmb-btn:hover:after {
top: 0;
left: 0;
transition: all 0.25s ease;
}
<a id="start-here-btn" class="mmb-btn alignright" href="/contact/"> GET STARTED </a>
You were missing .mmb-btn:hover:before, .mmb-btn:hover:after.
A quickie because why not. I suggest using transform instead of changing the position as it's more dom fluid and semantically cleaner.
Also remember to apply pointer-events: none to the pseudo element so you don't get the spazzy behavior when someone hovers the border outside of the button like you see on the other answers provided.
.fancy-btn {
padding: .5rem 1.5rem;
background-color: #eee;
position: relative;
transition: background-color .5s ease;
}
.fancy-btn:after {
content: '';
display: block;
pointer-events: none;
border: red 1px solid;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: translate(1rem,1rem);
transition: transform .25s ease;
}
.fancy-btn:hover {
background-color: yellow;
}
.fancy-btn:hover:after {
top: 0;
left: 0;
border-color: green;
transform: translate(0,0);
}
body {
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
<a class="fancy-btn">HEY I AM A BUTTON, YAY</a>
You have to add only the :hoverpseudo class.
.mmb-btn:hover::before, .mmb-btn:hover::after {
top: 0;
left: 0;
transition: all 0.25s ease;
}
.mmb-btn { -webkit-text-size-adjust: 100%;
box-sizing: border-box;
text-decoration: none;
text-rendering: optimizeLegibility;
position: relative;
color: #fff;
border: 0 none;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1);
background-color: #e4b067;
display: inline-block;
transition: none 0s ease 0s;
text-align: inherit;
line-height: 24px;
border-width: 0px;
margin: 0 auto;
padding: 12px 33px 11px;
letter-spacing: 4px;
font-weight: 400;
font-size: 14px;
}
.mmb-btn:before {
border: 1px solid #000;
top: 7px;
left: 7px;
}
.mmb-btn::after {
bottom: 0;
right: 0;
}
.mmb-btn:before, .mmb-btn:after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: ease;
transition-delay: 0s;
}
.mmb-btn:hover::before, .mmb-btn:hover::after {
top: 0;
left: 0;
transition: all 0.25s ease;
}
GET STARTED
I want to change the image on the button to this white version of it:http://res.cloudinary.com/djxai1v1e/image/upload/v1498062883/HR-Connect-Logowhite_fb7duw.png when hovered on. I thought I would just add a background-image to the :hover but that didn't work. Does anyone know how I can accomplish this? Anything helps, Cheers!
.button_slidehr {
color: #156466;
border: 1px solid rgba(21,100,102,0.35);
border-radius: 0px;
/* extend left padding */
padding: 18px 15px 18px 62px;
position: relative;
display: inline-block;
font-family: Verdana;
font-size: 14px;
margin-bottom: 20px;
letter-spacing: 1px;
background-color: rgba(255,255,255,0.3);
cursor: pointer;
box-shadow: inset 0 0 0 0 #156466;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
}
.slide_downhr:hover {
color:white;
border: 1px solid transparent;
box-shadow: inset 0 100px 0 0 #156466;
}
.button_slidehr:after {
content: "";
display: inline-block;
position: absolute;
left: 10px;
top: 0;
width: 100%;
height: 100%;
background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png);
background-position: left center;
background-repeat: no-repeat;
background-size: auto 80%;
}
<div class="button_slidehr slide_downhr">Contact HR Now></div>
.button_slidehr {
color: #156466;
border: 1px solid rgba(21,100,102,0.35);
border-radius: 0px;
/* extend left padding */
padding: 18px 15px 18px 62px;
position: relative;
display: inline-block;
font-family: Verdana;
font-size: 14px;
margin-bottom: 20px;
letter-spacing: 1px;
background-color: rgba(255,255,255,0.3);
cursor: pointer;
box-shadow: inset 0 0 0 0 #156466;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
}
.slide_downhr:hover {
color:white;
border: 1px solid transparent;
box-shadow: inset 0 100px 0 0 #156466;
}
.button_slidehr:hover:after {
background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498062883/HR-Connect-Logowhite_fb7duw.png);
}
.button_slidehr:after {
content: "";
display: inline-block;
position: absolute;
left: 10px;
top: 0;
width: 100%;
height: 100%;
background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png);
background-position: left center;
background-repeat: no-repeat;
background-size: auto 80%;
}
<div class="button_slidehr slide_downhr">Contact HR Now></div>
.slide_downhr:hover:after {
background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498062883/HR-Connect-Logowhite_fb7duw.png);
}
I want text which is written "This text needs to be in middle" to be positioned in the center.
You can view the problem in more detail by clicking the link below:
http://dabblet.com/gist/aadbfca153ec45c6633f
I tried to solve it with <span> tags.
You can use position: absolute; to achieve this. First set the container .option-header to position: relative;, and then the text on the right to position: absolute;. Then all you have to do is move it to the right with right: 0;. You can remove the float.
See the following snippet or your adjusted dabblet.
.option-header{
height: 76px;
width: 591px;
margin: 0 0 14px;
font-size: 32px;
/* padding-bottom: 8px; */
padding: 1px 0px;
text-align: center;
color: white;
font-size: 30px;
font-weight: 600;
padding: 20px 8px;
height: auto;
/* display: inline-block; */
-o-transition: .4s;
-ms-transition: .4s;
-moz-transition: .4s;
-webkit-transition: .4s;
/* transition: .4s; */
font-family: 'Alegreya SC',serif;
color: #fefefe;
border-radius: 0 0 6px 6px;
overflow: hidden;
border: 2px solid #e2e2e2!important;
background: #D85D1E;
position: relative;
}
.najjeftinija{
height: 39px;
background: rgb(110, 165, 38);
padding: 1px 0px;
}
.najjeftinija span{
padding-right: 5px;
font-size: 23px;
padding-top: 5px;
font-family: cursive;
}
.cijenadesno{
position: absolute;
right: 0;
}
<div class="option-header najjeftinija width-100"><span>This needs to be in middle </span><span class="cijenadesno">4.95 KM</span></div>
Just change the margin from margin: 0 0 14px; to margin: auto;
Full code
.option-header{
height: 76px;
width: 591px;
margin: auto; /* <-- Change here */
font-size: 32px;
/* padding-bottom: 8px; */
padding: 1px 0px;
text-align: center;
color: white;
font-size: 30px;
font-weight: 600;
padding: 20px 8px;
height: auto;
/* display: inline-block; */
-o-transition: .4s;
-ms-transition: .4s;
-moz-transition: .4s;
-webkit-transition: .4s;
/* transition: .4s; */
font-family: 'Alegreya SC',serif;
color: #fefefe;
border-radius: 0 0 6px 6px;
overflow: hidden;
border: 2px solid #e2e2e2!important;
background: #D85D1E;
}
I have a problem with creating centered boxes with css. For now I have this:
http://jsfiddle.net/LW7mN/2/
.trex-clear-all{
display: inline-block;
width: 99%;
height: 17px;
font-size: 12px !important;
text-align: -webkit-right !important;
text-align: right;
}
#trex_showonhover{
visibility:hidden;
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
position:absolute;
text-align:center;
width: 280px;
z-index:100;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 10px 10px 10px;
}
#trex_close_div{
top:6px;
right:6px;
position:absolute;
}
.trex_showdiv{
width:310px;
float: right;
}
.trex-text-title{
font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif !important;
font-size: 11px !important;
font-weight:700 !important;
padding: 2px !important;
}
.trex-new-widget-container {
font: 10pt normal Arial, sans-serif;
height: auto;
margin: 10px auto 0 auto;
text-align: center;
width: 100%;
}
.trex-new-widget-container .trex-box {
border: 1px solid #000;
cursor: pointer;
height: 180px;
width: 240px;
float: left;
margin: 3px;
position: relative;
overflow: hidden;
-webkit-box-shadow: 2px 1px 1px 1px #ccc;
-moz-box-shadow: 2px 1px 1px 1px #ccc;
box-shadow: 2px 1px 1px 1px #ccc;
}
.trex-new-widget-container .trex-box img {
position: absolute;
left: 0;
width:100%;
height: 100%;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.trex-new-widget-container .trex-box .trex-caption {
background-color: rgba(240,240,240,0.6);
position: absolute;
color: #000 !important;
z-index: 1000;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-in;
left: 0;
}
.trex-new-widget-container .trex-box .trex-full-caption {
width: 240px;
height: 50px;
top: 130px;
text-align: center;
padding-top: 0px;
}
.trex-new-widget-container .trex-box:hover .trex-full-caption {
-moz-transform: translateY(-60px);
-o-transform: translateY(-60px);
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
opacity: 1;
background-color: rgba(0,0,0,0.9);
color: #fff !important;
}
As you can see, when you change page width (resize browser, or change resolution) number of boxes per row are changing. That's ok, but the boxes shoud be aligned in the middle, not on the left as it is now.
I hope you understand what is the problem. Here is simple sketch so you can visualize it.
Thanks
.trex-new-widget-container .trex-box {
border: 1px solid #000;
box-shadow: 2px 1px 1px 1px #ccc;
cursor: pointer;
display: inline-block;
/*float: left;*/
height: 180px;
margin: 3px;
overflow: hidden;
position: relative;
width: 240px;
}
Use display instead float :
.trex-new-widget-container .trex-box {
border: 1px solid #000;
box-shadow: 2px 1px 1px 1px #ccc;
cursor: pointer;
display: inline-block;
height: 180px;
margin: 3px;
overflow: hidden;
position: relative;
width: 240px;
}