I'm creating a tooltip that pops up when you hover the ? icon. However, there's a gap between the icon and the content that follows that I don't want there.
What's causing this gap and how can I fix it?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css">
<i class="bi bi-question-circle tool" style="margin-left:200px">
</i>
<div class="tooltip">
<div class="tooltip-content">
text
<br>
text
<br>
text
</div>
</div>
<div style="position:relative">ContentContentContentContentContentContent</div>
<style>
.tooltip {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
display: block;
position: relative;
max-width: 300px;
margin-top: 30px;
visibility: hidden;
}
.tooltip:before {
content: "";
width: 50px;
height: 50px;
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -25px;
background: #fff;
transform: rotate(45deg);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
.tooltip-content {
background: #fff;
padding: 15px 20px;
position: relative;
}
.tool:hover +.tooltip {
visibility: visible;
}
</style>
https://jsfiddle.net/hu8g5eyw/
Related
I'm trying to build a "block" on a website that contains a background image with lowered opacity, some text with regular opacity and a button with regular opacity
Currently, I'm getting the background image and text to work, but the button is stuck on the image's opacity (blends in with the background).
Here is the html:
h1,p {
text-align: center;
position:relative;
top:-70px;
position: relative;
color: navy;
}
.box1 {
width: 97.5%;
background-color: white;
position: relative;
padding-top: 200px;
padding-bottom: 200px;
padding-left: 30px;
padding-right: 30px;
margin-top: 20px;
margin-bottom: 10px;
margin-right: 1.25%;
margin-left: 1.25%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.box1::before {
content: "";
background-image: url(/static/background.jpeg);
background-size: contain;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
position: absolute;
opacity: 0.5;
}
.click {
color:rgba(0, 0, 0, 0.19)
}
<div class="box1">
<h1>Our Mission</h1>
<p>THe organization plans to complete tasks x, y, z</p>
<button class="click">Learn More</button>
</div>
Add position: relative to your .click class.
Side note: You have a duplicate position: relative in your h1, p selector.
I have a card that needs to be covered by link and have text at the bottom corner. Currently text is located at the top, how can I move it to the bottom while keeping link covering card?
.card{
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
width: 200px;
height: 250px;
padding: 10px;
position: relative;
}
.card a {
color: red;
text-decoration: none;
padding: 10px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.card a:hover {
cursor: pointer;
text-decoration: underline;
}
<div class='card'>
<p>Some description goes here</p>
<a href='#'>Read more</a>
</div>
It is usually called stretched link (for example in Bootstrap) and it uses pseudo (before/after) elements which are absolute while the original element can be somewhere else.
To place link at the bottom of the card (without using absolute position) I've set flex to .card and margin-top: auto to a.
Something like this:
.card {
display: flex;
flex-flow: column;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
width: 200px;
height: 250px;
padding: 10px;
position: relative;
}
.card a {
color: red;
text-decoration: none;
margin-top: auto;
}
/* ↓↓ this is it ↓↓ */
.card a:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
.card a:hover {
cursor: pointer;
text-decoration: underline;
}
<div class='card'>
<p>Some description goes here</p>
<a href='#'>Read more</a>
</div>
I have trouble with vertical alignment of some google icons inside buttons. I tried to play with padding and margin but I could not fix the issue.
This is a screenshot of the problem: as you can see the icon are placed slightly higher:
This is part of the html, each button is more or less the same:
<div id="mainToolbar">
<button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
<i class="material-icons">brush</i>
</button>
</div>
This is the css for the button:
.button {
margin: auto;
display: inline-block;
margin-top: 5px;
color: black;
border: 0px solid grey;
border-radius: 6px;
background-color: #EFEFEF;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
vertical-align: middle;
}
.button {
width: 50px;
height: 40px;
}
.button:hover {
background-color: #aaaaaa !important;
color: white !important;
}
And finally the css for the div:
#mainToolbar {
position: absolute;
top: 0px;
left: 0px;
height: 520px;
width: 60px;
z-index: 10;
text-align: center;
}
How can I put the icon right in the middle of the button (both vertically and horizontally)? Thanks.
You can use absolute positioning along with translate to position the icon right in the middle. Be sure to add a position:relative on the button so that the icon is positioned w.r.t to the button.
.button {
margin: auto;
display: inline-block;
margin-top: 5px;
color: black;
border: 0px solid grey;
border-radius: 6px;
background-color: #EFEFEF;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
vertical-align: middle;
}
.button {
width: 50px;
height: 40px;
position: relative;
}
.button:hover {
background-color: #aaaaaa !important;
color: white !important;
}
.button:active i{
/*for push effect on click*/
transform: translate(-45%, -45%);
}
.button i {
/*horizontal and vertical centering*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#mainToolbar {
position: absolute;
top: 0px;
left: 0px;
height: 520px;
width: 60px;
z-index: 10;
text-align: center;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div id="mainToolbar">
<button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
<i class="material-icons">brush</i>
</button>
</div>
To explain:
top:50% with a position: absolute will move the icon down 50% of the parent's height. A translateY with -50% will move the icon up by half its height so that its aligned right in the middle by its center. Similarly with horizontal centering.
Its Working Fine see snippet
.button {
margin: auto;
display: inline-block;
margin-top: 5px;
color: black;
border: 0px solid grey;
border-radius: 6px;
background-color: #EFEFEF;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
vertical-align: middle;
}
.button {
width: 50px;
height: 40px;
}
.button:hover {
background-color: #aaaaaa !important;
color: white !important;
}
And finally the css for the div:
#mainToolbar {
position: absolute;
top: 0px;
left: 0px;
height: 520px;
width: 60px;
z-index: 10;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="mainToolbar">
<button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
<i class="fa fa-leaf"></i>
</button>
</div>
I want hover effect on div, I have applied bottom style when hover on div and everything is working but when hover border/edge of the div means the div jerking/jumping continuously.
my code :
.traning-box {
background: #fff;
padding-top: 70px;
padding-bottom: 30px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
border-radius: 5px;
width: 120px;
text-align: center;
}
.traning-box:hover {
bottom: 15px;
position: relative;
}
<div class="traning-box">
<p> Test box</p>
</div>
Try to use :after pseudo-element. When the .traning-box goes up, the :after goes down, so the cursor will still over the .traning-box (because it is a parent block for the :after).
.traning-box {
background: #fff;
border-radius: 5px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
padding-top: 70px;
padding-bottom: 30px;
position: relative;
text-align: center;
width: 120px;
}
.traning-box:after {
bottom: 0;
display: block;
content: '';
height: 15px;
left: 0;
position: absolute;
width: 100%;
}
.traning-box:hover {
margin-top: -15px;
}
.traning-box:hover:after {
bottom: -15px;
}
<div class="traning-box">
<p>Test box</p>
</div>
You could use animation to achieve it.
.traning-box {
background: #fff;
padding-top: 70px;
padding-bottom: 30px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
border-radius: 5px;
width: 120px;
text-align: center;
margin:20px;
position:relative;
}
.traning-box:hover {
animation-name:move;
animation-duration:1s;
animation-iteration-count:1;
animation-timing-function: ease;
position: relative;
border:1px solid red;
}
#keyframes move{
50%{
transform:translateY(-15px);
}
}
<div class="traning-box">
<p> Test box</p>
</div>
You need to use transition and translate together to achieve smooth hover effect.
.traning-box {
background: #fff;
padding-top: 70px;
padding-bottom: 30px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
border-radius: 5px;
width: 120px;
text-align: center;
transition: all 0.5s linear;
}
.traning-box:hover {
transform: translateY(-15px);
position: relative;
}
<div class="traning-box">
<p> Test box</p>
</div>
Try below. You have to use inner div to write a hover effect.
.traning-box{
background: #fff;
padding-top: 70px;
padding-bottom: 30px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
border-radius: 5px;
width: 120px;
text-align: center;
}
.traning-box1 {width:120px;}
.traning-box1:hover .traning-box{
bottom: 15px;
position: relative;
}
<br/>
<br/>
<div class="traning-box1">
<div class="traning-box">
<p> Test box</p>
</div>
</div>
I'm coding some fancy stuff for teaching myself.
I have an aslope left corner. Now, i want to add the box shadow and it showed like the following image:
This is my code snippet:
html, body {
margin: 0px;
}
.navbar {
position:relative;
content:"";
border-left: 300em solid #454545;
border-bottom: 120px solid transparent;
z-index: 2;
box-shadow: 0px 8px 23px 4px black;
}
.under-bar {
margin-top: -40px;
background: #851e39;
height: 200px;
opacity: 0.8
}
<html>
<body>
<div class="navbar">
</div>
<div class="under-bar">
</div>
</body>
</html>
Can someone help me to set a box-shadow under the header?
You can use transform: rotate(); instead of the border tricks.
body {
margin: 0;
}
.navbar {
height: 200px;
background-color: #9d4b61;
position: relative;
overflow: hidden;
}
.navbar:before {
content: "";
position: absolute;
left: 0;
top: -50px;
width: 100%;
height: 100px;
box-shadow: 0px 8px 23px 4px #000;
transform: rotate(-1deg);
background-color: #333;
}
.menu {
position: relative;
left: 20px;
top: 20px;
color: #fff;
}
<div class="navbar">
<div class="menu">menu</div>
</div>
You can use a border-radius and transform: scale:
body {
margin: 0;
background: #9d4b61;
}
.navbar {
width: 100%;
height: 50px;
background: #5c5c5c;
border-radius: 0 0 100%/22px 0;
box-shadow: 0px 8px 23px 4px rgba(0,0,0,0.8);
transform: scale(1.1,1);
}
<div class="navbar"></div>
The border-radius: 0 0 100%/22px 0 set a radius in the bottom right corner, which is 100% wide and 22px height, giving the radius a "stretched" look.
The transform: scale(1.1,1) is stretching the entire element, to hide the box-shadow in each side.