I am creating an image slider where in there will be images with text-box. The text-box will have a title with the actual title. But the actual title is too long so i am using tooltip to display the long text when we hover over the text-box
Issue i am facing here is that the text is not displayed on new line and only shows partially
The tooltip should show entire text in new lines but pointing to the same title. I checked online and found link and followed first answer but after that the text shows half. It should show entire text like "Electrolux EENB54EB Ultraenergica Classic Aspirapolvere" on new lines but pointing to same title.
See the html code:
<!DOCTYPE html>
<html>
<head>
<title>Image slider</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="image-container">
<center>
<div class="image">
<div class="image-box"><img class="image-cont" src=""></img></div>
<div class="text-box">
<p>Product title</p>
<span id="tooltiptext">Electrolux EENB54EB Ultraenergica Classic Aspirapolvere</span>
<p class="title">Electrolux EENB54EB Ultraenergica Classic Aspirapolvere</p>
</div>
</div>
<div class="image">
<div class="image-box"><img class="image-cont" src="http://ecx.images-amazon.com/images/I/51PhUckHB3L.jpg"></img></div>
<div class="text-box">
<p>Product title</p>
<p>Curtain</p>
</div>
</div>
<div class="image">
<div class="image-box"><img class="image-cont" src="http://ecx.images-amazon.com/images/I/518Se4188mL.jpg"></img></div>
<div class="text-box">
<p>Product title</p>
<p>Curtain</p>
</div>
</div>
<div class="image">
<div class="image-box"><img class="image-cont" src="http://ecx.images-amazon.com/images/I/51PhUckHB3L.jpg"></img></div>
<div class="text-box">
<p>Product title</p>
<p>Curtain</p>
</div>
</div>
</div>
</center>
</body>
</html>
Css code:
.image-container {
vertical-align: middle;
display: inline-block;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
width: 50%;
}
.image {
height: 200px;
width: 200px;
font-size: 25px;
margin: 10px;
display: inline-block;
line-height: 100px;
border: 2px red solid;
}
.image-box{
height:150px;
width: 200px;
background: green;
}
.image-cont{
height:150px;
width: 200px;
}
.text-box{
padding:0;
height: 50px;
width: 200px;
font-size: 12px;
line-height: 5px;
border-top: 2px red solid;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer
}
#tooltiptext{
position: absolute;
transform: translateX(-50%);
transform: translateY(100%);
background-color: #000;
border-radius: 7px;
color: #fff;
white-space: nowrap;
font-size: 15px;
line-height: 10px;
padding: 10px 5px;
display: block;
width: 200px;
word-break:break-all;
/*visibility: hidden;
opacity: 0;*/
}
#tooltiptext::before{
content: "";
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
transform: translateY(-200%);
border: 15px solid;
border-color: #0000 #0000 #000 #0000;
}
.text-box:hover #tooltiptext{
top: -130;
visibility: visible;
opacity: 1;
}
NOTE: tooltiptext is the element in question here which should show the entire text in lines below but pointing to the same image.
I am not familiar with css at all and struggling with these simple tasks. :(
any help would be appreciated
Additional info: When i select text, i can see i is hidden in same line. See the image: https://ibb.co/rG0MHVc .. since i was unable to add photo, added a link here
Related
I want my tooltip to appear just below my text of the image from image slider and not overlap the text or get hidden.
I have tried multiple things but i end up with tooltip getting hidden as follows: or if i remove the position:relative it does not slide with image and remains fixed or goes outside for last element
Html code:
<!DOCTYPE html>
<html>
<head>
<title>Image slider</title>
<link rel="stylesheet" type="text/css" href="style7.css">
</head>
<body>
<div class="image-container">
<center>
<div class="image">
<div class="image-box"><img class="image-cont" src=""></img></div>
<div class="text-box">
<p>Product title</p>
<span id="tooltiptext">Electrolux EENB54EB Ultraenergica Classic Aspirapolvere</span>
<p class="title">Electrolux EENB54EB Ultraenergica Classic Aspirapolvere</p>
</div>
</div>
<div class="image">
<div class="image-box"><img class="image-cont" src="http://ecx.images-amazon.com/images/I/51PhUckHB3L.jpg"></img></div>
<div class="text-box">
<p>Product title</p>
<span id="tooltiptext">WIFI smart ventil, smart vattenventil Automatisk manuell koppling för jordbevattningsrör</span>
<p>Curtain</p>
</div>
</div>
<div class="image">
<div class="image-box"><img class="image-cont" src="http://ecx.images-amazon.com/images/I/518Se4188mL.jpg"></img></div>
<div class="text-box">
<p>Product title</p>
<span id="tooltiptext">Salt Paprika Green Pepper Lovage Root Onion Garlic Savory Rosemary Sweet Basil Coriander Seeds Asafoetida Fenugreek Kycklingkrydda Ekologisk - Söt Kycklinggrillkrydda. Karaokemaskin med 2 trådlösa mikrofoner, bärbar karaokehögtalare Bluetooth-sång PA-system för vuxna och kit, karaokemikrofonuppsättning med stöd för USB TF AUX för hemmafest, vår dörr, julklappar</span>
<p>Curtain</p>
</div>
</div>
<div class="image">
<div class="image-box"><img class="image-cont" src="http://ecx.images-amazon.com/images/I/51PhUckHB3L.jpg"></img></div>
<div class="text-box">
<p>Product title</p>
<span id="tooltiptext">Electrolux EENB54EB Ultraenergica Classic Aspirapolvere</span>
<p>Curtain</p>
</div>
</div>
</div>
</center>
</body>
</html>
Css code:
.image-container {
vertical-align: middle;
display: inline-block;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
width: 50%;
}
.image {
height: 200px;
width: 200px;
font-size: 25px;
margin: 10px;
display: inline-block;
line-height: 100px;
border: 2px solid #ccc;
}
.image-box{
height:150px;
width: 200px;
background: green;
}
.image-cont{
height:150px;
width: 200px;
}
.text-box{
position: relative;
padding:0;
height: 50px;
width: 200px;
font-size: 12px;
line-height: 5px;
border-top: 2px solid #ccc;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer
}
#tooltiptext{
position: absolute;
/*transform: translateX(-50%);*/
/*transform: translateY(20%);*/
/*transform: translateY(100%);*/
z-index: 2;
top: 105%;
left:0;
/*bottom:105%;*/
background-color: #000;
border-radius: 7px;
color: #fff;
font-size: 15px;
line-height: 20px;
/*padding: 10px 5px;*/
display: block;
width: 200px;
word-wrap: break-word;
white-space: normal;
text-align: center;
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease;
}
/*#tooltiptext::before{
content: "";
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
transform: translateY(-50%);
border: 15px solid;
border-color: #0000 #0000 #000 #0000;
}*/
.text-box:hover #tooltiptext{
visibility: visible;
opacity: 1;
}
Expectation: I want my tooltip to be visible entirely and just little below the element when i hover over text-box. It should not be fixed at a position as this is an image slider. Can someone help?
I have two images with round corners that act as buttons. When the mouse pointer hovers over those images, the image dims and a text appears. The problem is that the text line has an effective area larger than the image display size. I want to make the text to be effective just in image boundaries. How can I fix this issue?
I have used this HTML/CSS code:
<!DOCTYPE html>
<html lang="fa">
<head>
<title>]Information System</title>
<style>
#main-image{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: auto;
}
h1{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color:floralwhite;
user-select: none;
}
.sub-image{
border-radius: 5%;
}
.container{
float: left;
width: 20%;
padding: 5%;
}
.image-text{
opacity: 0;
transition: 0.5s;
}
.sub-image:hover {
opacity: 0.3;
transition: 0.5s;
}
.sub:hover .image-text{
opacity: 1;
transition: 0.5s;
}
.row::after{
clear: both;
}
.container{
position: relative;
text-align: center;
}
.container .image-text{
position: absolute;
left: 0;
right: 0;
top: 60%;
text-align: center;
color: cornsilk;
}
</style>
</head>
<body bgcolor="black">
<div>
<img id="main-image" src="Images/IT.jpg" width="1600" alt="Intro">
</div>
<hr>
<div class="row">
<div class="container">
<a href="https:www.google.com">
<div class="sub">
<img class="sub-image" src="Images/repair.jpg" width="300">
<div class="image-text">
<h1>Failures</h1>
</div>
</div>
</a>
</div>
<div class="container">
<a href="https:www.google.com">
<div class="sub">
<img class="sub-image" src="Images/Equipment.jpg" width="300">
<div class="image-text">
<h1>Equipments</h1>
</div>
</div>
</a>
</div>
</div>
</body>
</html>
You can add the below css. This will ensure the h1 is positined relative to the sub class and any overflow will be hidden. You can remove the text-overflow ellipsis if you don't want to show that there is more text
.sub{
position: relative;
}
.image-text h1{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
To blur background even on text hover use parent selector of .sub instead of .sub-image like below
.sub:hover .sub-image {
opacity: 0.3;
transition: 0.5s;
}
hi I'm assigned to do a basic profile page for class, but for one of the html pages I am unable to put the text in front of each individual image, i removed my attempts at it to help ease confusion.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr></hr>
<img src="assets/images/gym.jpg" alt="gym">Gym
<img src="assets/images/hiking.jpg" alt="hiking">Hiking
<img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
<img src="assets/images/running.jpg" alt="running">Running
<img src="assets/images/programming.jpg" alt="programming">Programming
</div>
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
You'll need to absolute position your text in front of the image with css. It helps to wrap each image and text item into a block to apply the css.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="assets/images/gym.jpg" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="assets/images/hiking.jpg" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="assets/images/overwatch.jpg" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="assets/images/running.jpg" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="assets/images/programming.jpg" alt="programming">
<span>Programming</span>
</div>
</div>
css:
.item {
position: relative;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Edit: Added a simplified fiddle example
* {
box-sizing: border-box;
}
.aboutmeprofile {
float: left;
background-color: white;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.item {
position: relative;
width: 100%;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
text-align: center;
width: 100%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
<span>Programming</span>
</div>
</div>
The best way to do this is to create a div for the label and use the image as the background-image for the div.
background-image: image.png
jsfiddle
this is what I came up with. Just add the other images and its respective label:
#h2, #h3 {
color: #4aaaa5;
text-align: left;
font-size: 30px;
font-weight: bold;
font-family: 'Georgia', Times, Times New Roman, serif;}
#linebreak {
clear: both;
border: 1px solid gray;
width: 100%;
margin: 0;
padding: 0;}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.container {
height: 100%;
width: 100%;
position: relative;
}
.image {
width:100%;
height:100%;
}
.text {
position: absolute;
color: white;
left: 50%;
top: 50%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Gym
</span>
</div>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Hiking
</span>
</div>
</div>
Hope it helps!
You can simply do this with position:absolute property , first you need to create a relative div , then call the image and h2 inside the div , then set absolute position to h2
Check with the snippet
.content_div {
position:relative;
}
.content_div h2 {
position:absolute;
bottom:25px;
color:#fff;
font-size:18px;
}
.content_div h2 span {
background:rgba(0,0,0,0.8);
padding:10px;
display:block;
border-bottom:2px solid #000;
}
.content_div h2 span:last-child{
border-bottom:none;
}
<div class="content_div">
<img src="http://www.picgifs.com/graphics/c/cute/graphics-cute-160852.jpg" alt="image" />
<h2>
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</h2>
</div><!-- /.content_div -->
So i have an image, I have a text box with a transparent background that is overlaid on the image (FYI it contains the price of the item and if it is onsale).
I would like the text box to "fit" the width of the image it is over.
Currently the text is wider than the image. I've tried adjusting the width but that only seems to shrink it and move the box out from being over the image.
http://jsfiddle.net/Ggqy4/
Here is what I'm aiming to create. Notice the text is only as wide as the image.
http://imgur.com/zKzjIyF
The red box inside the box is on the first item on the left, the girl in the vest.
HTML:
<div class="date-container">
<div class="date-heading" style="display: block;">Friday, Oct 11, 2013</div>
<div class="items-purchased-container">
<DIV style="position: absolute; top:10px; left:355px; width:200px; height:25px">3</span> items purchased</p>
</div>
<div class="total-spend-container">
<div class="product">
<img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" alt="" />
<div class="description">
<p>Sex shirt in sparkly black <span class="price">Price $500</span>
</p>
</div>
</div>
<div class="product">
<img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" alt="" />
<div class="description">
<p>Sex shirt in sparkly black <span class="price sale">Sale Price $500</span>
</p>
</div>
</div>
CSS:
body {
background:#00000;
text-align:center;
}
.product {
display:inline-block;
position:relative;
margin-right:10px;
vertical-align:top;
}
.product img {
display:block;
max-width:100%;
}
.description {
position:absolute;
background:rgba(255, 255, 255, 0.75);
top:60%;
;
text-align:center;
width:100%;
}
.description span {
display:block;
margin-top:10px;
padding:5px;
}
.sale {
background:red;
}
Here is a JSFiddle file for your review: CLICK HERE
As mentioned above by Giovanni Silveira, your images contain a large left/right border. You can either crop in your favorite image editor or you will have to manipulate your code to accommodate the added area to your liking.
I did add some changes to force the appearance you were looking for, however if you want a less intrusive set up then it would be prudent to change you images to fit your needs.
To view how the page was set up, just add
border: 1px solid #ccc;
to your product and description classes to see the flow and gain a better understanding of the images impact on flow of document.
Hope this helps.
Here is the code:
HTML:
<div class="orderinfo">
<div class="date">Friday, Oct 11, 2013</div>
<div class="purchaseitems">3 items purchased</div>
</div>
<div class="total-spend-container">
<div class="product">
<img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" style="width:300px;height:250px" alt="" />
<div class="description">
<p>Sex shirt in
<br>sparkly black</br> <span class="price">Price $500</span>
</p>
</div>
</div>
<div class="product">
<img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" style="width:300px;height:250px" alt="" />
<div class="description">
<p>Sex shirt in
<br>sparkly black</br> <span class="price sale">Sale Price $500</span>
</p>
</div>
</div>
CSS:
body {
background: #00000;
text-align: center;
}
.orderinfo {
position: relative;
width: 100%;
min-width: 650px;
font-family: "Courier", sans-serif;
font-size: 20px;
}
.date, .purchaseitems {
float: left;
width: 49%;
padding-bottom: 10px;
}
.total-spend-container {
min-width: 650px;
}
.product {
position: relative;
display: inline-block;
width: 300px;
height: 250px;
}
.product img {
background-position: center;
background-size: cover;
}
.description {
position: absolute;
background: rgba(255, 255, 255, 0.75);
font-family: "Courier", sans-serif;
font-style: italic;
top: 50%;
text-align: center;
left: 25%;
width: 50%;
}
.description span {
display: inline-block;
margin-top: 10px;
padding: 3px;
}
.sale {
background: red;
color: white;
}
I am trying to align my 40px40px image to bottom right. I've tried this, worked fine, but if I use another back image, it doesn't fit to bottom right. How can I avoid this problem ?
<div style="width:179px;margin-right:9px;padding-bottom:10px;background-color:white;border:1px solid #c9d2d6;padding:4px;padding-bottom:7px;border-radius:4px;position:relative">
<img src="http://media-cache-ec4.pinterest.com/upload/212443307392484250_XX0wNZSy_b.jpg" style="width:179px;" \>
<div style="position:absolute;z-index:5;top:73%;left:75%;width:40px;height:40px;border:1px solid #333333;">
<img width=40 src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
<div style="border-radius:6px;width:179px;border-top:0px;position:relative;background-color:white;">
<div style="text-align:left;padding-left:6px;padding-right:5px;padding-top:3px;">Fragments by textile artist Lorenzo Nanni (2001) </div>
</div>
</div>
UPDATE:
That said, you should use a mix of CSS and HTML instead:
HTML:
<div class="container">
<div class="picture-container">
<img src="http://media-cache-ec4.pinterest.com/upload/212443307392484250_XX0wNZSy_b.jpg" class="background-picture" \>
<div class="avatar">
<img src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
</div>
<div class="container-text">
<div>Fragments by textile artist Lorenzo Nanni (2001)<br />More text</br />Goes here</div>
</div>
</div>
CSS:
.container {
width: 179px;
margin-right: 9px;
padding-bottom: 10px;
background-color: white;
border: 1px solid #c9d2d6;
padding: 4px;
padding-bottom: 7px;
border-radius: 4px;
position: relative;
}
.container .picture-container {
position: relative;
min-height: 60px;
}
.container .background-picture {
width: 179px;
}
.container .avatar {
position: absolute;
z-index: 5;
bottom: 10px;
right: 5px;
width: 40px;
height: 40px;
border: 1px solid #333333;
}
.container .avatar img {
width: 40px;
}
.container .container-text {
border-radius: 6px;
width: 179px;
border-top: 0px;
position: relative;
background-color: white;
}
.container .container-text div {
text-align: left;
padding-left: 6px;
padding-right: 5px;
padding-top: 3px;
}
This also fixed the problem in the comment below.
DEMO
Old post, that explains why you have a problem in the first place and doesn't account for taller text:
In
<div style="position:absolute;z-index:5;top:73%;left:75%;width:40px;height:40px;border:1px solid #333333;">
<img width=40 src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
instead of
top:73%;left:75%; then use bottom and right like so: bottom: 60px;right: 10px;
Full example:
<div style="width:179px;margin-right:9px;padding-bottom:10px;background-color:white;border:1px solid #c9d2d6;padding:4px;padding-bottom:7px;border-radius:4px;position:relative">
<img src="http://media-cache-ec4.pinterest.com/upload/212443307392484250_XX0wNZSy_b.jpg" style="width:179px;" \>
<div style="position:absolute;z-index:5;bottom: 60px;right: 10px;width:40px;height:40px;border:1px solid #333333;">
<img width=40 src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
<div style="border-radius:6px;width:179px;border-top:0px;position:relative;background-color:white;">
<div style="text-align:left;padding-left:6px;padding-right:5px;padding-top:3px;">Fragments by textile artist Lorenzo Nanni (2001) </div>
</div>
</div>
DEMO
You have to put it inside a container, then make the image a block to avoid the space under it. Note that using properties right & bottom are a better solution than left and top.
http://jsfiddle.net/Ka4r4/