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
Related
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'm trying to do a thumbnail page with a hover transition that zooms and displays a description. EDIT: I do not want to use jquery.
Problem 1. The hovered div pushes the neighbor div out of alignment. All the thumbs should stay in nice neat rows.
Problem 2. The hovered div pushes the bottom of the container down.
.container {
margin-top: 75px;
text-align: center;
border: 2px solid black;
padding: 5px;
}
.tn-wrapper {
display: inline-block;
position: relative;
border: 0;
margin: 5px;
height: 150px;
overflow: hidden;
transition: all 200ms ease-in;
transform: scale(1);
}
.tn-wrapper:hover {
z-index: 1;
transition: all 200ms ease-in;
transform: scale(1.5);
height: 300px;
}
.thumb-box {
background: lightgray;
height: 150px;
width: 150px;
}
.descr-box {
background: gray;
height: 150px;
width: 150px;
}
<div class="container">
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
</div>
You can update your code like below. You fix the alignment of the inline-block elements (not mandatory but to make sure they will stay at the top) and you adjust the height of the description instead of the parent element.
.container {
margin-top: 75px;
text-align: center;
border: 2px solid black;
padding: 5px;
}
.tn-wrapper {
display: inline-block;
position: relative;
border: 0;
margin: 5px;
height: 150px;
transition: all 200ms ease-in;
transform: scale(1);
vertical-align:top; /* added */
}
.tn-wrapper:hover {
z-index: 1;
transition: all 200ms ease-in;
transform: scale(1.5);
}
.thumb-box {
background: lightgray;
height: 150px;
width: 150px;
}
.descr-box {
background: gray;
height: 0;
width: 150px;
overflow:hidden;
transition: all 200ms ease-in;
}
.tn-wrapper:hover .descr-box{
height: 150px;
}
<div class="container">
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
</div>
I'm not sure if this is the desired look you're trying to achieve but check out this example
I've added a flexbox to your container, changed your transform-origin and utilized the appropriate margins to keep your spacing.
.container {
margin-top: 75px;
text-align: center;
border: 2px solid black;
padding: 5px;
display:flex;
justify-content:center;
}
.tn-wrapper {
display: inline-block;
position: relative;
border: 0;
margin: 5px;
height: 150px;
transition: all 200ms ease-in;
transform: scale(1);
transform-origin:top;
}
.tn-wrapper:hover {
z-index: 1;
transition: all 200ms ease-in;
transform-origin:top;
transform: scale(1.5);
margin:5px 43px 305px 43px;
}
I'm trying a pretty basic transition but it's not right on Safari..
All I want to do is change background images from A to B on hover. However, the transition is not working the first time I hover over the element.
On first hover, it is just instantly changing as opposed to gradually fading in/out.
JSFiddle here -- https://jsfiddle.net/RalphCSD/z9nx30co/4/
I'm using a Wordpress site if that makes any difference..
I've also included the HTML & CSS below. If anyone can see any errors that may be causing the issue I would greatly appreciate any help.
.colBox {
width: 100%;
max-width: 300px;
min-height: 400px;
background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions.jpg");
right: 0px;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-webkit-backface-visibility: hidden;
}
.colCon {
padding-top: 50px;
padding-left: 35px;
max-width: 200px;
color: white !important;
font-family: 'Montserrat', sans-serif;
}
.colHead {
color: white !important;
font-weight: 400 !important;
font-size: 12px !important;
}
.colHeadLg {
font-size: 40px;
font-weight: 700;
padding-top: 50px;
}
.colP {
font-size: 12px;
line-height: 16px;
}
.moreArrow {
font-size: 20px;
}
.colBox:hover {
width: 100%;
max-width: 300px;
min-height: 400px;
background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions-BG.jpg");
-webkit-backface-visibility: hidden;
}
.hover-div {
width: 200px;
margin-top: 70px;
}
.hover-div .stuff {
margin-top: 0;
position: relative;
width: 100%;
z-index: 2;
-webkit-transition: margin-top 0.5s;
transition: margin-top 0.5s;
}
.hover-div .stuff-hidden {
height: 0;
width: 100%;
overflow: hidden;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
.hover-div:hover .stuff {
margin-top: -40px;
}
.hover-div:hover .stuff-hidden {
height: 40px;
}
<div class="colBox">
<a href="#">
<div class="colCon">
<h2 class="colHead">CUSHION COLLECTION</h2>
<div class="hover-div">
<div class="stuff">
<p class="colHeadLg">Cushions</p>
<p class="colP">Our luxury feather filled cushions are statement pieces each with a story to tell</p>
</div>
<div class="stuff-hidden">
<p class="moreArrow">More <span><i class="fas fa-arrow-right"></i></span></p>
</div>
</div>
</div>
</a>
</div>
Try increasing the transition time from 0.5 seconds to 1.5 seconds:
.colBox {
width: 100%;
max-width: 300px;
min-height: 400px;
background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions.jpg");
right: 0px;
transition: all 1.5s ease-in-out;
-webkit-transition: all 1.5s ease-in-out;
-webkit-backface-visibility: hidden;
}
You have that jumping in every browser, just rest of them cache the hover image.
Basically, you gotta pre-load the image, which is on hover. Like, set it as background for parent element.
I've built a navmenu that has shown/hidden after click a button. In transition I change opasity .box navmenu and height .menu-box links.
But it works only when navmenu is shown. When I try to hide transition doesn't work, navmenu is hidden right away, without animation and time animation.
html
<div class="box " [ngClass]="{'show-mobile-navmenu' : showMobileNavmenu }">
<div class="menu-box" [ngClass]="{'show-menu-box' : showMobileNavmenu }">
<div class="menu " >
<div class="link" *ngFor="let link of links">
<modal-link [link]="link"></modal-link>
</div>
<div class="link">
<span class="a-link" (click)="changeLanguage()">{{'lang' | translate }}</span>
</div>
</div>
</div>
</div>
css
.link {
text-align: center;
}
.a-link {
font-size: 24px;
line-height: 48px;
width: 100%;
font-weight: bold;
}
.box {
background-color: #fff;
opacity: 0;
height: 0;
position: fixed;
left: 0;
width: 100%;
top: 69px;
z-index: 100;
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
transition: opacity 0.5s ease-in-out;
}
.box::-webkit-scrollbar {
/* WebKit */
width: 0;
height: 0;
}
.box.show-mobile-navmenu {
height: calc(100vh - 69px);
opacity: 0.8;
}
.menu-box {
position: relative;
margin-top: -8px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
opacity: 0;
transition: min-height .5s ease-out, opacity .5s ease-in;
}
.show-menu-box {
min-height: 100%;
opacity: 1;
}
.menu {
width: 100%;
padding-top: 38px;
padding-left: 3px;
}
How to do that when I hide navmenu opacity goes from 1 to 0 and links go down?
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.