Can someone tell me why I cannot use z-index to position this link above it's containing div's top border? Link to jfiddle here. Code below:
<div class="social_story twitter ellipsis" style="word-wrap: break-word;">
<a class="floating-icon" href="https://twitter.com/au_cadc" target=
"_blank"></a>
</div>
.social_story{
width: 100%;
height: 358px;
padding-bottom: 20px;
margin-top: 20px;
position: relative;
background-color: #eeeeee;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
border-top: 30px solid #dd550c;
}
.floating-icon {
position: absolute;
width: 42px;
height: 42px;
top: -15px;
left: 15px;
background-color: white;
border-radius: 25px;
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
transition: all 250ms;
z-index:2;
}
Because you have overflow set to hidden on your .social_story container.
Related
I am trying to make a animated ribbon but I have had luck making it.
When I use hover on left-id it works but when I try to use on RibbonContainer or right-id it doesn't work.
#RibbonText {
background: #5bdfb8;
color: #009;
font-size: 12px;
height: 100%;
width: 0;
visibility: visible;
transition: width .5s, padding-right .5s, visibility .5s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 30px;
}
#RibbonContainer {
display: flex;
align-items: stretch;
height: 30px;
position: absolute;
z-index: 1;
top: 10px;
left: -6px;
transition: width 2s, box-shadow 2s;
}
#left {
height: 33px;
}
#RibbonContainer:hover+#RibbonText {
width: 100%;
visibility: visible;
padding-right: 10px;
}
<div class="RibbonContainer">
<img id="left" class="RibbonImage" alt="ribbon-shwadow" src="https://via.placeholder.com/50" />
<span id="RibbonText" class="ribbon">
{ribbonText}
</span>
<img id="right" class="RibbonImage" alt="ribbon-end" src="https://via.placeholder.com/50" />
</div>
The solution is changing this #RibbonContainer:hover + #RibbonText to #RibbonContainer:hover > #RibbonText
and I'm trying to add a black container below my video and add the title and description inside that black container on hover, but the description in overlapping the black container how to l keep it inside the black container.
.previewContainer.small {
position: relative;
width: 230px;
height: 129px;
margin-right: 4px;
display: inline-flex;
transition: 0.5s ease;
overflow: hidden;
white-space: nowrap;
flex: 1 1 0px;
transition: transform 500ms;
}
.title{
display: none;
}
.previewContainer.small:focus-within,
.previewContainer.small:hover{
margin-left: 65px;
transform: translateY(-50%) translateX(-50%);
z-index: 1;
width: 230px;
height: 250px;
background-color: #141414;
border-radius: 5px;
}
.small:focus ~ .small,
.small:hover ~ .small {
transform: translateX(25%);
}
.previewContainer.small:focus,
.previewContainer.small:hover {
transform: scale(1.6);
z-index: 1;
}
.Play{
position: absolute;
width: 100%;
display: flex;
margin-left: 10px;
background-color: transparent;
font-size: 10px;
padding: 0px;
transition-duration: 1s;
}
.title{
position: absolute;
text-transform: capitalize;
width: 100%;
display: flex;
margin-left: 10px;
background-color: transparent;
font-size: 5px;
transition-duration: 1s;
}
.description{
position: absolute;
display: flex;
padding-top: 30px;
margin-left: 10px;
background-color: transparent;
text-decoration:none;
overflow: hidden;
color: white;
}
.title h6{
color:#fff !important;
font-weight: 300;
font-size: 14px;
}
.video-item {
position: relative;
max-width: 100%;
transition: transform 0.2s;
z-index: 1;
cursor: pointer;
border-radius: 4px;
object-fit: cover;
}
<div class="previewContainer">
<div class="previewContainer small">
<a href"">
<video class="mylist-img video-item" onmouseover="this.play()" onmouseout="this.pause();">
<source src="https://sgcholdings.co.za/Backend/media/sample-30s.mp4">
Your browser does not support the video tag.
</video>
<div class="title">
<h6>Video One</h6>
</div>
<div class="description">
<p class="">Loren ipsum dolor sit amet because there are two,
there is web version which works on hover with a small pop up then </p>
</div>
</a>
</div>
</div>
so l want to contain the description to be inside that black background that comes when l hover. can someone assist how to contain the paragraph tag not to overlap
You can update your CSS with following code
.description {
white-space: normal;
}
white-space:normal Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
In the CSS for div of class description add this rule
.description{
word-wrap: break-word;
}
CSS word-wrap property is used to break the long words and wrap them onto the next line. This property is used to prevent overflow when an unbreakable string is too long to fit in the containing box.
.previewContainer.small {
position: relative;
width: 230px;
height: 129px;
margin-right: 4px;
display: inline-flex;
transition: 0.5s ease;
flex: 1 1 0px;
transition: transform 500ms;
}
.title{
display: none;
}
.previewContainer.small:focus-within,
.previewContainer.small:hover{
margin-left: 65px;
transform: translateY(-50%) translateX(-50%);
z-index: 1;
width: 230px;
height: 300px;
background-color: #141414;
border-radius: 5px;
word-wrap: break-word;
}
.small:focus ~ .small,
.small:hover ~ .small {
transform: translateX(25%);
}
.previewContainer.small:focus,
.previewContainer.small:hover {
transform: scale(1.6);
z-index: 1;
}
.Play{
position: absolute;
width: 100%;
display: flex;
margin-left: 10px;
background-color: transparent;
font-size: 10px;
padding: 0px;
transition-duration: 1s;
}
.title{
position: absolute;
text-transform: capitalize;
width: 100%;
display: flex;
margin-left: 10px;
background-color: transparent;
font-size: 5px;
transition-duration: 1s;
}
.description{
position: absolute;
display: flex;
padding-top: 30px;
margin-left: 10px;
background-color: transparent;
text-decoration:none;
overflow: hidden;
color: white;
word-wrap: break-word;
}
.title h6{
color:#fff !important;
font-weight: 300;
font-size: 14px;
}
.video-item {
position: relative;
max-width: 100%;
transition: transform 0.2s;
z-index: 1;
cursor: pointer;
border-radius: 4px;
object-fit: cover;
}
<div class="previewContainer">
<div class="previewContainer small">
<a href"">
<video class="mylist-img video-item" onmouseover="this.play()" onmouseout="this.pause();">
<source src="https://sgcholdings.co.za/Backend/media/sample-30s.mp4">
Your browser does not support the video tag.
</video>
<div class="title">
<h6>Video One</h6>
</div>
<div class="description">
<p class="">Loren ipsum dolor sit amet because there are two,
there is web version which works on hover with a small pop up then </p>
</div>
</a>
</div>
</div>
I have a problem like this (jsfiddle). Why does the hover of the absolute position is not only the bullet area? It cause I can't click the button, because of it covered by that absolute position. I want that tooltip shows only just when mouse over on the top of the bullet area not outside. Please help me, tq.
css:
.badgeP {
list-style: none;
padding:0;
padding-bottom: -10px;
margin-left: 25px;
display: inline-block;
position: relative;
}
.badgeP > li{
display: inline-block;
}
li.badgeP1:before{
content: "\25cf\00a0";
font-family: arial;
font-size: 100%;
position: relative;
left: 6px;
margin-left: -4px;
}
li.badgeP1:before {
color: orange;
}
.badgeP1:hover .ttbadgeP1{
opacity:1;
}
.badgeP1{
position: relative;
}
.ttbadgeP1{
background-color: black;
font-size: 90%;
padding-left: 3px;
padding-right: 7px;
padding-top: 0px;
padding-bottom: 2px;
margin: auto;
width: 40px;
height: auto;
position: absolute;
border-radius: 3px;
left: -18px;
top: 17px;
color: white;
box-shadow: 2px 2px 2px #888888;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.ttbadgeP1-text:before{
content: '';
width: 0px;
height: 0px;
position: absolute;
border-style: solid;
border-width: 4px;
border-color: transparent transparent black transparent;
left: 17px;
top: -8px;
}
.ttbadgeP1-text{
position: relative;
float: left;
width: auto;
text-align: center;
}
html:
<ul class='badgeP'>
<li class='badgeP1'>
<span class='ttbadgeP1'><span class='ttbadgeP1-text'>reputasi klik</span></span> 556
</li>
</ul>
<br>
. <input type='button' value='muke'></input>
you need to get that badge (.ttbadgeP1) out ouf your way first, using visibility:
.ttbadgeP1{visibility:hidden;}
then show it only on hover:
.badgeP1:hover .ttbadgeP1{visibility:visible;}
updated fiddle: http://jsfiddle.net/k2uepv26/3/
note that you can't just use the display property instead of visibility, see this question for details
Please change the width of .ttbadgeP1
.ttbadgeP1 {
width: 72px;
}
I want to center my text in a relative height div which contains an image. I use absolute position but when my text is on two lines, the text is not centered. I've already tried to use a table but it doesn't work due to the img.
HTML:
<div id="hubs">
<h3>Nos Hubs</h3>
<hr>
<a class="thumbnail vignette-hub" href="http://kkw.fr">
<img style="opacity: 0.6;filter: alpha(opacity=60);" alt="Aéroport de Nantes" src="http://kkw.fr/uploads/upload-center/nantes-vue-aerienne091501270208.png" width="100%" />
<p class="txt-hub-image">
Hub de</br>Nantes
</p>
</a>
</div>
CSS :
.txt-hub-image {
z-index: 100;
position: absolute;
left: 0px;
top: 50%;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
color: white;
font-weight: bold;
font-size: 16px;
}
.vignette-hub {
position: relative;
width: 25%;
min-width: 135px;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #337ab7;
}
.thumbnail .caption {
padding: 9px;
color: #333;
}
Do you have any ideas ?
There are a few changes required to your snippet to make it automatically work for all dimensions:
p tags by default have a margin-top. If you don't reset it, then absolutely positioning it at 50% would become 50% + margin-top. This needs to be reset.
When you absolutely position an element at top: 50%, the box gets positioned at 50% height of the container and text keeps getting added from that position on. So, to match the center of the text block with the center of the parent, you have to translate the box with the text up by 50% of its own size. This can be done by adding transform: translateY(-50%).
You don't need to add a height: 100% on the p tag and it can be removed.
Note: Using transform method for positioning needs CSS3 support but I assume this shouldn't be a problem because you are already using transition.
If you want to support non CSS3 compatible browsers, have a look at the other approaches mentioned here. I have added a different answer just to explain the first two points I had mentioned above.
.txt-hub-image {
z-index: 100;
position: absolute;
left: 0px;
top: 50%;
width: 100%;
text-align: center;
text-decoration: none;
color: white;
font-weight: bold;
font-size: 16px;
/* added to fix the vertical centering */
margin-top: 0px;
transform: translateY(-50%);
}
.vignette-hub {
position: relative;
width: 25%;
min-width: 135px;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #337ab7;
}
.thumbnail .caption {
padding: 9px;
color: #333;
}
<div id="hubs">
<h3>Nos Hubs</h3>
<hr>
<a class="thumbnail vignette-hub" href="http://kkw.fr">
<img style="opacity: 0.6;filter: alpha(opacity=60);" alt="Aéroport de Nantes" src="http://kkw.fr/uploads/upload-center/nantes-vue-aerienne091501270208.png" width="100%" />
<p class="txt-hub-image">
Hub de</br>Nantes
</p>
</a>
</div>
Here is a demo fiddle as the snippets feature seems to be down.
Change your .txt-hub-image class, top value from 50% to 25%.
i have an Content in an table cell. The content inside is always centered and in the middle. But when the cell is smaller than the Content i want to truncate the Text. But it doesn't work. The Cell has a fixed width and height, but when i truncate it, the cell is to big.
Have anyone an Idea? Or is it possible to use jQuery?
HTML/CSS
<table>
<tr>
<td><a href="">
<div class="ev orange">
<div class="ev_text">EURO VI NORM PRODUCT MODIFICATION, M1 LANE KEEPING ASSIST N2 & M2</div>
</div>
</a>
</td>
</tr>
</table>
.ev {
color: #000;
cursor: pointer;
transition: box-shadow 0.1s linear;
/* line-height: 28px; */
position: relative;
height: 51px;
display: table;
border-left: 1px solid black;
border-right: 1px solid black;
font-size: 8px;
width: 20px;
height: 20px;
}
.ev_text {
color: #000;
cursor: pointer;
transition: box-shadow 0.1s linear;
line-height: 17px;
position: relative;
max-height: 51px;
min-height: 51px;
overflow: hidden;
line-height: normal;
display: table-cell;
vertical-align: middle;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Here's my fiddle:
http://jsfiddle.net/vnx0sb2L/1/
Edit html structure and css as below.
<div class="ev_text">
<p class="truncate">EURO VI NORM PRODUCT MODIFICATION, M1 LANE KEEPING ASSIST N2 M2</p>
</div>
// css
.truncate{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 51px;
max-height: 51px;
}
The reason of this problem is you have made a div as display: table-cell where ellipsis works with block level element.
You can remove overrride properties from .ev_text class.
Test like this :
<style>
.ev {
color: #000;
cursor: pointer;
transition: box-shadow 0.1s linear;
/* line-height: 28px; */
position: relative;
height: 51px;
/*display: table;*/
border-left: 1px solid black;
border-right: 1px solid black;
font-size: 8px;
width: 20px;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ev_text {
color: #000;
cursor: pointer;
transition: box-shadow 0.1s linear;
line-height: 17px;
position: relative;
max-height: 51px;
min-height: 51px;
overflow: hidden;
line-height: normal;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<table>
<tr>
<td style='max-width:12px;height:auto;'>
<div class="ev orange">
<div class="ev_text">EURO VI NORM PRODUCT MODIFICATION, M1 LANE KEEPING ASSIST N2 & M2BLALALLALALALLALALLALALALA</div>
</div>
</td>
</tr>
</table>
The text overflow have to be in .ev no in .ev_text
EDIT :
Also remove in css display table