When hovering over a in html I want to display a text. Right now I have it this way:
echo "<td onmouseover='' style='cursor: pointer; background-color:#ffeb3b' title=$text id=$text></td>";
The problem is that it looks very small and without design.
How could I make it look bigger and with a little look?
I would like to do something similar to this in html.A box that appears on the right
For more information look here
body {
text-align: center;
}
.tooltip {
position: relative;
display: inline-block;
cursor: default;
}
.tooltip .tooltiptext {
visibility: hidden;
padding: 0.25em 0.5em;
background-color: black;
color: #fff;
text-align: center;
border-radius: 0.25em;
white-space: nowrap;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 100%;
transition-property: visibility;
transition-delay: 0s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
transition-delay: 0.3s;
}
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
This is how you can do it. First, create the main element, I'm using a text, and next to it add the text you wish to show on hover. Style everything according to your taste. Make sure you set the display of the extra text to none. Basically, we'll hide it and show it only when someone hovers over the main element.
Now, in the CSS, I've added .Main-Text:hover + .Extra-Text CSS Selector to achieve what we are trying to do. This basically means that when someone hovers on the element with class Main-Text, something will happen to the element with the class Extra-Text.
You can read about this more here.
* {
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
min-height: 100vh;
}
.Main-Text:hover + .Extra-Text {
display: block;
}
.Extra-Text {
background-color: #FFFFFF;
margin-top: 10px;
width: 200px;
border: 2px solid #000000;
padding: 10px;
font-size: 16px;
display: none;
}
<html>
<div>
<p class="Main-Text">
Hover me to know more about me.
</p>
<div class="Extra-Text">
<p>
This is the extra information that will be displayed when the text is hovered.
</p>
</div>
</div>
</html>
I don't think so if this is something you are looking for but it's worth mentioning. You can use the title attribute in the HTML Elements to display some text when the user hovers over the element. Try it yourself. Run the snippet below and hover over the text.
* {
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
min-height: 100vh;
}
<html>
<div>
<p class="Main-Text" title="This is some extra text">
Hover me to know more about me.
</p>
</div>
</html>
Related
I wanted to make a landing page for fun, and see how to make it look better, and I figured that I could make a sentence with spinning text in the middle. I've added a GIF to let you guys see what I want it to look like. I did see another post on here similar to mine, but the person that replied had it messed up slightly
I tried using CSS scrolling text, but that made the entire sentence start moving. I tried putting the beginning and end in different DIVs but then they were all seperated.
It needs to be independent element but you can inline-block it. Within this also overflow:hidden element will be a bigger element to be scrolled inside.
h1 {
display: flex;
height: 40px;
/* to center: */
justify-content: center;
}
.scroll-container {
text-align: center;
display: inline-block;
overflow: hidden;
position: relative;
height: 40px;
/* border: 1px solid red; */
margin-left: 10px;
margin-right: 10px;
}
.text-inside .item {
height: 40px;
}
.text-inside {
margin-top: 0;
transition: 500ms;
animation: 3s infinite test;
}
#keyframes test {
0% {
margin-top: 0;
}
25% {
margin-top: 0;
}
50% {
margin-top: -40px;
}
100% {
margin-top: -80px;
}
}
<div style="inline-block">
<h1>Welcome to
<div class="scroll-container">
<div class="text-inside">
<div class="item">Paris</div>
<div class="item">Frankfurt</div>
<div class="item">Milano</div>
</div>
</div>, Joshua
</h1>
I am making a personal site about Boy Scout merit badges. I have a page with a background image where I put up a CSS grid containing cards, each of which is about a different badge. The card shows the badge emblem and has the title of the badge. When you hover over the card there is a sliding up of white text with a blue background that explains the badge. When you stop hovering, it slides back down.
The effect works for the most part, but there's one small problem. The cards have rounded borders, and when the blue slides down, at the very end of the slide down, the blue extends beyond the edges of the card. It is very distracting. It starts the slide up the same way, but for some reason it's more distracting on the way down than on the way up. Here's what it looks like at that end.
Here is my HTML:
<main class="main--grid-container">
<div class="mb-blocks center rounded-border wrapper">
<img class="mb-emblem" src="https://retailobjects.scoutshop.org/media/catalog/product/cache/15846fcd7c7438adaa15ad763c45b358/1/0/10504.jpg" alt="american heritage badge emblem">
<h4>American Heritage</h4>
<div class="overlay">
<div class="content">
<p>
Scouts learn about American history while working on the American Heritage
merit badge. Topics covered range from the Declaration of Interdependence,
to the history of the US flag, to historic places, to their own family
history. They also learn about careers related to the study of American
heritage.
</p>
</div>
</div>
</div>
</main>
Here is the CSS:
body {
background-color: lightgreen;
}
.mb-emblem {
height: 150px;
}
.main--grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 25px;
padding-left: 25px;
padding-right: 25px;
}
.center {
text-align: center;
}
.rounded-border {
border-radius: 25px;
}
.mb-blocks {
padding: 25px;
background-color: white;
z-index: 2;
}
h4 {
font-size: 24px;
margin: 0;
}
.wrapper {
position: relative;
}
.content {
color: #fff;
font-size: 1em;
padding: 1em;
}
.content span {
font-size: .75em;
display: block;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #003366;
border-radius: 25px;
width: 100%;
height: 0;
transition: .5s ease;
overflow: hidden;
margin: 0;
}
.wrapper:hover .overlay {
height: 100%;
}
I changed the background-image to a background-color and put it in a CodePen to make it easier to see. Here is the CodePen.
Thanks for the help!
All you need to do is add overflow: hidden to the mb-blocks class.
Like this:
.mb-blocks {
padding: 25px;
background-color: white;
z-index: 2;
overflow: hidden;
}
replace this style code to fix the problem.
.mb-blocks {
padding: 25px;
background-color: white;
z-index: 2;
overflow: hidden; /* This is the important part */
}
I got the following question, with a pic to illustrate:
I got a container, containing an icon and text. The Icon is always on the left, there can be more icons which are all fixed on the left. Now I want the text to be in the centre of the container. If the text gets too long, it should NOT overlap the icons, but it should expand to the right instead.
If the text is too long to fit in the container next to the icon, finally I just ellipse it.
But how do I do this? Is there a css solution?
Thanks in advance!
You can have the text taking the entire width of the container parent, but having left and right padding in a way that it will have enough space for the icon.
Then you can have the icon overlaying on top of the textbox.
The text box can align text in the center and clip text if overflow.
I made a simple pen to illustrate the idea. I hope this help
Codepen example
Here's the code.
HTML
<div class="container">
<i class="fa fa-map"></i>
<div class="textbox"><span class='centerized-text'>This is a centered text and it is very long</span></div>
</div>
CSS
.container {
background-color: #FAFBFD;
width: 15rem;
height: auto;
padding: 0.5rem;
border-radius: 4px;
}
i {
color: teal;
position: absolute;
}
.textbox {
padding: 0 1.3rem;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body {
padding: 2rem;
background-color: #dedede;
}
(The style for body is just for your visual pleasure)
Here a code
#container {
display: flex;
flex-direction: row;
padding: 20px;
border: 2px solid skyblue;
}
#icon {
width: 24px;
height: 24px;
border-radius: 12px;
background-color: skyblue;
}
#text {
flex: 1;
text-align: center
}
<div id="container">
<span id="icon"></span>
<span id="text">Lorem Ipsum</span>
</div>
To have text centered in the block
#container {
position: relative;
padding: 20px;
border: 2px solid skyblue;
text-align: center;
}
#icon {
width: 24px;
height: 24px;
border-radius: 12px;
background-color: skyblue;
position: absolute;
left: 20px;
top: 0;
bottom: 0;
margin: auto;
}
<div id="container">
<span id="icon"></span>
<span id="text">Lorem Ipsum</span>
</div>
In a container use, two span tag and First span will contain your image tab and another has text in it.
You can use align-text-center to center your text.
I have to create an icon navigation bar with webfont-icons on the top of the page, that is tiled 3 Sections:
upper-left: Icons are aligning on the left side
middle-center: Icons are aligning in the middle of the site
upper right: Icons are aligning on the right side
This part i got to work. With the following HTML ...
<div id="topNavigation">
<div id="topNavigationLeft">
<div class="iconButton makeAnIcon" data-icon="🙈"><span class="tooltiptext">The funky monkey</span></div>
<div class="iconButton makeAnIcon" data-icon="😎"><span class="tooltiptext">The cool smiley</span></div>
</div>
<div id="topNavigationMiddle">
<div class="iconButton makeAnIcon" data-icon="🚹"><span class="tooltiptext">Man rest room</span></div>
<div class="iconButton makeAnIcon" data-icon="🚺"><span class="tooltiptext">Woman rest room</span></div>
<div class="iconButton makeAnIcon" data-icon="🚾"><span class="tooltiptext">Water Closet</span></div>
</div>
<div id="topNavigationRight">
<div class="iconButton makeAnIcon" data-icon="🚻"><span class="tooltiptext">Mixed up rest room</span></div>
<div class="iconButton makeAnIcon" data-icon="🚼"><span class="tooltiptext">Baby room</span></div>
<div class="iconButton makeAnIcon" data-icon="🚽"><span class="tooltiptext">Toilet</span></div>
</div>
</div>
This is the CSS i had used:
.iconButton {
float: left;
margin-left: 10px;
margin-right: 10px;
}
.iconButton:hover {
color: #ff0000;
}
.iconButton .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.iconButton:hover .tooltiptext {
visibility: visible;
}
.makeAnIcon:before
{
font-family: 'Arial';
content: attr(data-icon);
font-size:60px;
}
#topNavigation {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
position: absolute;
width: 100%;
height: 80px;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
border-bottom: 1px solid;
}
#topNavigationLeft {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
height: 100%;
/* Debug Color */
/* background-color: rgba(255, 0, 0, 0.2); */
}
#topNavigationMiddle {
display: flex;
justify-content: center;
flex-wrap: nowrap;
height: 100%;
/* Debug Color */
/* background-color: #711e82; */
}
#topNavigationRight {
display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
height: 100%;
/* Debug Color */
/* background-color: rgba(255, 0, 0, 0.2); */
}
See my fiddle: https://jsfiddle.net/schludi/yrgaf6p9/
Now i have to show a text UNDER the Icons on hover.
My problem is, that it is under the flex-container i have used and it should not affect further elements that will be added under the "topnavigation"-div.
When i am on the upper right side, the Text should appear left-aligned to the icon, that no scroll bars will be generated because the span element is too big. How can i do this?
First off, for ToolTips i would highly recommend using a plugin. You'll run into issues where the tooltip goes off the screen (either x or y) and you can't detect that at all with CSS.
However, lets answer your question.
So if you've got a div that's appearing underneath another element, there's one nice css property that will solve this for you! I see you've already used it. What you can do is add z-index to your element that you want on top. The higher the index, the higher the element will be visually.
.iconButton .tooltiptext {
display:none;
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 9999; /* This is extreme, don't always default to 9999 */
}
Just make sure the z-index of the element you want on top is higher than the other elements. If it's still not on top, then the chances are the parent is lower than the other element that you want on top, so on your flex-container make sure that the z-index is lower than the parent of .tooltiptext
For your specific case, the following would keep the last tooltip within the bounds of the page. It's not very dynamic, though.
#topNavigationRight .iconButton:last-of-type .tooltiptext {
right: 0;
}
I'm wanting to create some boxed content that reveals alternate content when hovered. I've found a few examples from others questions, and tried to utilise them to what I want, but not having much luck.
The perfect example of what I'm trying to achieve is the 3 hover buttons under the "Build a Smarter WordPress Site" (just below the fold) on http://www.copyblogger.com/.
I'm assuming the static state includes an icon/image & text below, and the hover state includes an icon/image, descriptive text, and a hyperlinked button.
This is exactly what I'm wanting to reproduce. Could anyone please provide an example of this so I can understand what I need to do?
Thanks.
Edit: I understand the code Copyblogger have used from what little I can retrieve through "Inspect Element". I'm not looking to use their code - as I cannot find all the connecting commands, but something that acts the same way.
for code sample that showed in your sent link
<li class="design">
<div class="icon">Design</div>
<p>The Genesis design framework, support and dozens of stunning themes.</p><div class="btn-primary-small">Find Out More</div>
</li>
the css will be
li.design a{
display:none;
}
li.design:hover a{
display:block;
}
Here is a fiddle. There are 3 or 4 ways to do this, but you just want someone to do it for you, so I wont go into those specifics. I wrote it mobile first and assuming you can use box-sizing: border-box; - so if you can't do that - then you just add the proper widths and you'll be good to go.
HTML
<a href="#" class="block-icon">
<div class="block top-stuff">
<div class="text-w">
Top stuff
</div>
</div>
<div class="block under-stuff">
<div class="text-w">
<h4>Under stuff</h4>
<p>Some paragraph</p>
<div class="button">Call to action</div>
</div>
</div>
</a>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
.block-icon {
position: relative;
display: block;
width: 100%;
float: left;
border: 1px solid red;
text-align: center;
height: 10em;
margin-bottom: 1em;
}
.block-icon .block {
height: 100%;
padding: .5em;
}
.block-icon .text-w {
width: 100%;
height: 100%;
display: inline-block;
vertical-align: middle;
border: 1px solid blue;
}
.block-icon .text-w:after {
content: "\0020";
height: 100%;
display: inline-block;
vertical-align: middle;
/* this creates a second element so that they can align vertical middle to one another */
}
.top-stuff {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: white;
opacity: 1;
transition: opacity .5s linear;
}
.under-stuff {
background-color: #eee;
}
a:hover .top-stuff {
opacity: 0;
transition: opacity .1s linear;
}
.button {
width: auto;
border: 1px solid black;
}
#media (min-width: 500px) {
.block-icon {
width: 32%;
margin-right: 2%;
}
.block-icon:nth-of-type(3) {
margin-right: 0;
}
} /* end break-point */