I know this is a simple formatting question, but I need to format some text inside a hover box over an image. I want to separate the hover text into two paragraphs, and the hover text is not covering the entire image for some reason...below is my hover CSS:
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
ul.img-list li {
display: inline-block;
height: auto;
margin: ;
position: relative;
width: 100%;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
display: table;
height: 100%;
left: 0;
position: justify;
top: 0;
width: 75%;
}
span.text-content span {
display: ;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
display: table;
height: auto;
left: 0;
position: justify;
top: ;
width:100%;
opacity: 0;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
span.text-content {
background: rgba(0,0,0,0,5);
color: white;
display: ;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 2000ms;
-moz-transition: opacity 2000ms;
-o-transition: opacity 2000ms;
transition: opacity 2000ms;
}
You can do something like this code example here: JSFiddle
HTML:
<span class="tooltip" data-tooltip="I'm small tooltip. Don't kill me!">Hover me!</span>
CSS:
.tooltip {
border-bottom: 1px dotted #0077AA;
cursor: help;
}
.tooltip::after {
background: rgba(0, 0, 0, 0.8);
border-radius: 8px 8px 8px 0px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
color: #FFF;
content: attr(data-tooltip); /* The main part of the code, determining the content of the pop-up prompt */
margin-top: -24px;
opacity: 0; /* Our element is transparent... */
padding: 3px 7px;
position: absolute;
visibility: hidden; /* ...and hidden. */
transition: all 0.4s ease-in-out; /* To add some smoothness */
}
.tooltip:hover::after {
opacity: 1; /* Make it visible */
visibility: visible;
}
Related
On mobile, the logo is fixed and obscures the top of the body text of the page. I added spacers to most pages to compensate for this, but I was unable to add a spacer to the Classifieds page which uses a blog format. Can anyone help me figure out how to add a spacer to the header so that it doesn't overlap the body?
Here is what I think are the relevant parts of the main.less file that causes the problem:
/* Header */
.wsite-header-section {
position: relative;
background: url(images/default-bg.jpg) no-repeat;
background-size: cover;
}
.wsite-header-section:before,
.splash-page .header-wrap:before {
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
width: 100%;
min-height: 100%;
height: inherit;
background: rgba(0, 0, 0, 0.2);
content: '';
}
.wsite-section-bg-color:before {
display: none;
}
.header-wrap #logo {
padding: 10px 0!important;
text-align: center;
font-family: 'Cookie', cursive;
font-size: 40px;
font-weight: normal;
line-height: 1.1;
}
.header-wrap #logo a {
color: black;
-webkit-transition: all 300ms ease-in;
-moz-transition: all 300ms ease-in;
-ms-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
transition: all 300ms ease-in;
}
.header-wrap #logo a:hover {
opacity: 0.8;
}
.header-wrap #logo img {
display: block;
overflow: hidden;
max-width: 1000px;
max-height: 1000px;
}
.header-wrap #logo #wsite-title {
display: block;
max-width: 1000px;
}
.header-wrap #logo img {
max-height: 1000px;
}
.header-wrap .wsite-logo {
padding: 30px 0 20px;
}
.header-wrap .nav-wrap {
position: relative;
z-index: 6;
width: 100%;
background: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #cccccc;
text-align: center;
}
.header-wrap .hamburger {
display: none;
}
There's also a mobile.js but it seems to mainly control the nav menu.
Thanks in advance!
I tried making the header-wrap position absolute, but that just caused overlapping text on the mobile view so I changed it back.
I'm made this button that when hovered transitions the ::before in to change how the button looks. It works fine when there is no border but when a border is added it leaves a little bit of the background.
.submit-button {
font-size: 16px;
color: #FFFFFF;
background-color: red;
padding: 14px 16px;
border: 3px solid #FFFFFF;
transition: color 300ms cubic-bezier(0.3, 1, 0.8, 1);
border-radius: 24px;
cursor: pointer;
position: relative;
z-index: 1;
overflow: hidden;
}
.submit-button::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #FFFFFF;
border-radius: 24px;
z-index: -1;
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms cubic-bezier(0.3, 1, 0.8, 1);
}
.submit-button:hover::before {
transform: scaleX(1);
}
.log-out-button:hover {
color: red
}
div {
background-color: red
}
<div><button class="submit-button log-out-button">hello</button></div>
Slightly different look but you could simplify your CSS and solve your border radius problem by depending on the overflow: hidden styling and having the background color of your transform fill the space of the shape (essentially falling behind the border).
.submit-button {
font-size: 16px;
color: #FFFFFF;
background-color: red;
padding: 14px 16px;
border: 3px solid #FFFFFF;
border-radius: 24px;
cursor: pointer;
position: relative;
z-index: 1;
overflow: hidden;
margin: 4px;
}
.submit-button::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #FFFFFF;
z-index: -1;
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms cubic-bezier(0.3, 1, 0.8, 1);
}
.submit-button:hover::before {
transform: scaleX(1);
}
.log-out-button:hover {
color: red
}
div {
background-color: red
}
<div><button class="submit-button log-out-button">hello</button></div>
I want a button hover transition using an (I think) mask in the background.
A button that in normal state has a white background and black letters would have a black background sliding in from the side on hover making the letters white on the go. Like so:
I got it working using a before and after pseudo:
.button--slide {
background-color: #fff;
color: #000;
border-radius: 10px;
border: none;
padding: 10px 20px;
position: relative;
transition: all 0.5s ease;
cursor: pointer;
overflow: hidden;
}
.button--slide span {
position: relative;
z-index: 999;
}
.button--slide:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: calc(-100% - 35px);
top: 0;
background-color: #000;
transition: left 0.5s ease;
}
.button--slide:after {
content: "";
position: absolute;
top: 0;
left: -70px;
width: 0px;
height: 0px;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 35px solid #000;
transition: left 0.5s ease;
}
.button--slide:hover {
color: #fff;
}
.button--slide:hover:before {
left: 0;
}
.button--slide:hover:after {
left: calc(100% - 35px);
}
See fiddle https://jsfiddle.net/5arj1emx/
It's not quite how I want it: I would like the background to mask the letters like in the example so that the letters turn white as the black background slides over it.
Is this possible?
do a background animation for both the pseudo element and the span and make the one of the span to color the text. I used a big transition time to better see the result;
body {
background-color: #efefef
}
.button--slide {
background-color: #fff;
color: #000;
border-radius: 10px;
padding:0;
border: none;
position: relative;
cursor: pointer;
overflow: hidden;
}
.button--slide span {
display:block;
padding: 10px 20px;
position: relative;
transition: all 5s ease;
color:transparent;
font-weight:bold;
background:linear-gradient(-45deg,#000 50%,#fff 0) right/220% 100% no-repeat;
-webkit-background-clip:text;
background-clip:text;
}
.button--slide:before {
content: "";
width: 100%;
position: absolute;
left: 0;
top: 0;
bottom:0;
background:linear-gradient(-45deg,transparent 50%,#000 0) right/220% 100% no-repeat;
transition: 5s ease;
}
.button--slide:hover span,
.button--slide:hover:before {
background-position:left;
}
<button class="button--slide">
<span>SEE OUR GLOBES</span>
</button>
I've got some css/html code. I wanna improve my "unhover" state by doing following: when I hover over a button there is a before element sliding from left to right. I can easily change it from right to left. However when I do the "unhover" action, before element slides in the opposite direction - from right to left. What I want to achieve is animating it's width from 100% to 0% but from left to right. What should I do to get the result?
https://codepen.io/trueFalse24/pen/YzKNgYm
a{
background: #7f8c8d;
padding: 20px 30px;
text-transform: uppercase;
color: #fff;
position: relative;
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: rgba(236,240,241, 0.3);
transition: all 0.3s ease;
}
&:hover{
&:before{
width: 100%;
}
}
}
I've modified your pen to get the effect by changing a few usages of the left and right properties. My edits are marked by comments below.
.container{
padding:0;
margin: 0;
box-sizing: border-box;
background: #3498db;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
a{
background: #7f8c8d;
padding: 20px 30px;
text-transform: uppercase;
color: #fff;
position: relative;
&:before{
content: '';
position: absolute;
top: 0;
right: 0; /* Replaced left */
width: 0%;
height: 100%;
background: rgba(236,240,241, 0.3);
transition: all 0.3s ease;
}
&:hover{
&:before{
width: 100%;
right: auto; /* Added */
left: 0; /* Added */
}
}
}
}
This is my modification of someone else's hover effect. So I am not familiar with the working of btn-2 class.(I don't know the syntax used)
Here is my CSS code:
* {
box-sizing: inherit;
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
}
body {
background-color: black;
}
a {
text-decoration: none;
color: tomato;
font-size: 50px;
font-family: 'Oswald', sans-serif;
}
.container {
padding: 1em;
text-align: center;
vertical-align: middle;
}
.btn-2 {
letter-spacing: 10px;
}
.btn-2:hover,
.btn-2:active {
letter-spacing: 30px;
}
.btn-2:after,
.btn-2:before {
border: 1px solid rgba(tomato, 0);
bottom: 2px;
top: 2px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.btn-2:hover:after,
.btn-2:hover:before {
backface-visibility: hidden;
border-color: tomato;
transition: width 350ms ease-in-out;
width: 50%;
}
.btn-2:hover:before {
bottom: auto;
top: 0;
width: 50%;
}
I want to use the effect for button in my navigation bar. But I have 3 problems to solve:
I want the lines above and below the word that appear when you hover it to be of the same width as the word.
I want the word to be centered relative to the line. That is, the line should grow out from the middle point of the word.
The lines isn't going where the word is going.
Some discoveries I make, which I don't know the cause of:
The 2 lines will be longer when .comtainer{padding=1em} than 5em.
When I delete text-align and vertical-align in the .container class, the hovering lines stay centered, but the word goes to the left of the window.
I'm not sure how good I understand you, but here some example I made
a {
color: #333;
display: inline-block;
padding: 15px 0;
position: relative;
text-align: center;
text-decoration: none;
transition: all 250ms ease-in-out;
&:before,
&:after{
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 2px;
background-color: #333;
transition: all 250ms ease-in-out;
}
&:before {
top:0;
}
&:after {
bottom: 0;
}
&:hover {
letter-spacing: 5px;
&:before,
&:after {
width: 100%;
}
}
//Trick is here
span {
&:before {
content:attr(title);;
letter-spacing: 5px;
display:block;
height:1px;
color:transparent;
overflow:hidden;
visibility:hidden;
margin-bottom:-1px;
}
}
}
<span title="Hover Me">Hover Me</span>
You can check my example here