I have a hoverable CSS-only tooltip that works well in most instances, but I want to add a scrollbar when it exceeds a max-height. If I add max-height: 50px; overflow-y: auto, my pseudo elements :before and :after will disappear due to the overflow property.
See: http://jsfiddle.net/accelerate/24xwru1n/
Is there a way to add a scrollbar to my tooltip while maintaining my pseudo elements? Or will I have to live without my pseudo elements to make it work?
I'm afraid you have to add a wrapper when you want a scroll in hover and apply to this the css as in tooltip-text:
HTML
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>
.wrapper{
position:relative;
}
.tooltip {
transform: none;
margin: 50px;
}
.tooltip:hover > .tooltip-text, .tooltip:hover > .wrapper {
pointer-events: auto;
opacity: 1.0;
}
.tooltip > .tooltip-text, .tooltip >.wrapper {
display: block;
position: absolute;
z-index: 6000;
overflow: visible;
padding: 5px 8px;
margin-top: 10px;
line-height: 16px;
border-radius: 4px;
text-align: left;
color: #fff;
background: #000;
pointer-events: none;
opacity: 0.0;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
/* Arrow */
.tooltip > .tooltip-text:before, .tooltip > .wrapper:before {
display: inline;
top: -5px;
content: "";
position: absolute;
border: solid;
border-color: rgba(0, 0, 0, 1) transparent;
border-width: 0 .5em .5em .5em;
z-index: 6000;
left: 20px;
}
/* Invisible area so you can hover over tooltip */
.tooltip > .tooltip-text:after, .tooltip > .wrapper:after {
top: -20px;
content: " ";
display: block;
height: 20px;
position: absolute;
width: 60px;
left: 20px;
}
.wrapper > .tooltip-text {
overflow-y: auto;
max-height: 40px;
display: block;
}
<div class="tooltip">Hover over me for no scrollbar<span class="tooltip-text">Hello there<p/>abc<br/>def<br/>ghi<br/>jkl<br/></span></div>
<p/><p/><p/>
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>
Related
I'm fighting with quite easy problem.
Sections change their max-height on hover.
the small span article article__tag should always position at the bottom of its parent (the green line) no matter how much the row will grow and share its easing animation and delay.
This is what I have:
section{
background: #000;
color: #fff;
display: flex;
max-height: 150px;
border-bottom: 1px solid lightgreen;
transition: max-height .5s ease-in-out;
position: relative;
overflow: hidden;
}
section:hover {
max-height: 400px;
transition-delay: .3s;
}
article {
flex:1;
height: 200px
}
.article__tag {
background: white;
color: #000;
position: absolute;
padding: 10px;
top: 120px;
transition: all .5s ease-in-out;
transition-delay: .3s;
}
section:hover .article__tag {
bottom: 0;
top: inherit;
}
<section>
<article>A</article>
<article><span class="article__tag">tag</span></article>
</section>
<section>
<article>B</article>
<article><span class="article__tag">tag</span></article>
</section>
https://codepen.io/t-book/pen/LYpjVPz
My problem is, on mouse leave the white label jumps up quickly. Further, I've defined it's top with 165px a value which I cannot foresee as the rows have different content.
How can I position the label always on current max-height bottom?
Keep article_tag at bottom always:
section{
background: #000;
color: #fff;
display: flex;
max-height: 150px;
border-bottom: 1px solid lightgreen;
transition: max-height .5s ease-in-out;
position: relative;
overflow: hidden;
}
section:hover {
max-height: 400px;
transition-delay: .3s;
}
article {
flex:1;
height: 200px
}
.article__tag {
background: white;
color: #000;
position: absolute;
padding: 10px;
bottom: 0px;
transition: all .5s ease-in-out;
transition-delay: .3s;
}
<section>
<article>A</article>
<article><span class="article__tag">tag</span></article>
</section>
<section>
<article>B</article>
<article><span class="article__tag">tag</span></article>
</section>
Sample of hover effect
I want the hover effect to be animated starting from 0 center out to full size over 0.3s. The effect is what I want ,but the animation isn't working.The page I'm going to build will consist of eight different images (two columns four in each) I want this hover effect to work as you hove hover each image.
#tabbox{
height: 300px;
position: relative;
//border: 2px solid #888;
}
#tabbox img{
cursor: pointer;
display: block;
width: 240px;
height: 240px;
}
.tab {
float: left;
}
.tabcontent{
position: absolute;
padding:10px;
top:0;
width: 0px;
height: 0px;
background:rgba(0, 0, 0, .5);
border:1px solid #fff;
margin:10px;
color:#fff;
display:none;
overflow:hidden;
-webkit-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
.tabcontent:before{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.tab:hover > .tabcontent{
display: block;
width: 200px;
height: 200px;
}
.tab:hover:before, .tab:active:before{
-webkit-transform: scale(1);
transform: scale(1);
}
<div id="tabbox">
<div class="tab">
<img src="http://zone1.gingermartinco.netdna-cdn.com/wp-content/uploads/2012/04/Napa-Real-Estate-Realtor.jpg" />
<div class="tabcontent">
<p>Text box to describe the images around when you hover over them, this description will change depending on what image you hover over.</p>
</div><!--tabcontent-->
</div><!--tab-->
</div><!--tabbox-->
Just remove the display: none; from .tabcontent as this property can't be animated, only number properties can be animated.
Fiddle:
https://jsfiddle.net/uxouomoy/
Your fiddle and your question code is not the same.
But taking the code from the fiddle you should put the transition only in .tabcontent style. Use top and left properties to animate from the center position to the left corner position.
See the fiddle
Here's the css it is using:
#tabbox {
height: 300px;
position: relative;
//border: 2px solid #888;
}
#tabbox img {
cursor: pointer;
display: block;
width: 240px;
height: 240px;
}
.tab {
float: left;
}
.tabcontent {
position: absolute;
padding: 10px;
width: 0px;
height: 0px;
background: rgba(0, 0, 0, .5);
border: 1px solid #fff;
margin: 10px;
color: #fff;
display: block;
overflow: hidden;
top: 100px;
left: 100px;
visibility: hidden;
transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transition: width top left;
}
.tab:hover > .tabcontent {
visibility: visible;
width: 200px;
height: 200px;
top: 0px;
left: 0px;
}
<div id="tabbox">
<div class="tab">
<img src="http://zone1.gingermartinco.netdna-cdn.com/wp-content/uploads/2012/04/Napa-Real-Estate-Realtor.jpg" />
<div class="tabcontent">
<p>Text box to describe the images around when you hover over them, this description will change depending on what image you hover over.</p>
</div>
<!--tabcontent-->
</div>
<!--tab-->
</div>
<!--tabbox-->
How to create transition effect like:
http://jsfiddle.net/mfn5nefb/6/
but for text input?
I tried replace h1 with input but it does not work.
You have to change the HTML structure to do the same with input because you can't use pseudo elements like :after on an input element (which is an auto closing element)
HTML
<div id="input">
<input type="text" value="CSS IS AWESOME" /><span></span>
</div>
CSS
#input {
color: #666;
position: relative;
display: inline-block;
}
span {
position: absolute;
left: 50%;
content: '';
height: 40px;
height: 5px;
background: #f00;
transition: all 0.5s linear;
width: 0;
bottom: -5px;
}
input:hover ~ span {
width: 200px;
margin-left: -105px;
}
See this fiddle
.input_container{
display: inline-block;
text-align: center;
}
.awsome_input{
padding: 5px 10px;
border: none;
background: transparent;
display: block;
}
.awsome_input_border{
display:inline-block;
width:0px;
height: 2px;
background: #FEC938;
position: relative;
top:-5px;
-webkit-transition: all ease-in-out .15s;
-o-transition: all ease-in-out .15s;
transition: all ease-in-out .15s;
}
.awsome_input:hover,
.awsome_input:active,
.awsome_input:focus{
outline: none;
}
.awsome_input:hover+.awsome_input_border,
.awsome_input:active+.awsome_input_border,
.awsome_input:focus+.awsome_input_border{
width:100%;
}
<div class="input_container">
<input type="text" class="awsome_input"
placeholder="What do you think?"/>
<span class="awsome_input_border"/>
</div>
I have div elements that are 200px tall and 200px wide, and I am filling each div element with an image of a person.
Upon hovering on the image, I want the image to be blurred, but I simultaneously want text to appear on the image (unblurred) that gives a description of who they are. Does anyone know how to do this?
So far, this is what I am getting:
Here is the CSS code:
.mem1 {
height: 200px;
width: 200px;
margin: 0px 31px;
display: inline-block;
border-radius: 10px;
border: solid;
border-width: thin;
border-color: #d6d6d6;
background-image: url(members/giles.png);
}
.mem1 p {
text-align: center;
position: absolute;
margin: 70px 30px;
visibility: hidden;
}
.mem1:hover {
-webkit-filter: blur(2px);
}
.mem1:hover p {
text-align: center;
position: absolute;
margin: 70px 30px;
color: #ffffff;
text-shadow: 1px 1px #000000;
-webkit-filter: blur(0px);
visibility: visible;
}
It sounds like the text is a child of the element that you are blurring. You can't do that. You need to do something like this:
<div class="container">
<div class="blurredPhoto"></div>
<div class="text">Your Text</div>
</div>
.container {
width: 200px;
height: 200px;
position: relative;
}
.blurredPhoto {
position: absolute;
width: 200px;
height: 200px;
}
.text {
position: absolute;
width: 200px;
height: 200px;
}
Then apply your blurring logic only to the .blurredPhoto object.
Here is a code snippet that does what you are looking for - blurring an image when you mouse over it, while simultaneously showing a textual description.
The key is that you need to use the :hover pseudoclass on the div, then when the div is hovered, you blur the image only, and show the description text span.
.blur {
width: 350px;
height: 350px;
}
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur span {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur:hover img {
-webkit-filter: blur(5px);
}
.blur span {
opacity: 0;
position: absolute;
top: 30px;
left: 30px;
}
.blur:hover span {
opacity: 1;
}
<div class="blur pic">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350">
<span>This is a photo of something.</span>
</div>
As #DA explained you need to get a parent container involved. Here's a working fiddle using your example code: https://jsfiddle.net/m25gkqkL/1/
<div class="parent">
<div class="mem1"></div>
<p>Hello World!</p>
</div>
.mem1 {
height: 200px;
width: 200px;
margin: 0px 31px;
display: inline-block;
border-radius: 10px;
border: solid;
border-width: thin;
border-color: #d6d6d6;
background-image: url(members/giles.png);
z-index: 1;/* added */
position: relative;/* added */
}
.parent {/* added this */
position: relative;
height: 200px;
width: 262px;
}
.parent p {/* modified */
text-align: center;
position: absolute;
visibility: hidden;
top: 50%;/* modified */
margin-top: -0.5em;/* added */
width: 262px;/* added */
z-index: 2;/* added */
}
.parent:hover .mem1 {/* modified */
-webkit-filter: blur(2px);
}
.parent:hover p {/* modified */
color: #ffffff;
text-shadow: 1px 1px #000000;
-webkit-filter: blur(0px);
visibility: visible;
}
.parent{
position: relative;
}
.text-child{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: all .3s ease;
z-index: 1;
}
.text-child h1{
color: black;
text-decoration: none;
font-size: 40px;
}
.parent:hover img{
filter: blur(4px);
}
.parent:hover .text-child{
opacity: 1;
}
<div class="parent">
<div class="text-child">
<h1> hi this is text.<h1>
</div>
<img src="/images/excel.png" alt="">
</div>
I want to have a transistion on my menu list when hovered but I want to change the border-bottom to border-top.
How can I do this?
.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle-out:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
width: 100%;
background: blue;
}
<li class="scroll sliding-middle-out">Features</li>
You can use the :before pseudo element instead of the :after pseudo element so the line is displayed on top of (before) your link:
.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle-out:before {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:before {
width: 100%;
background: blue;
}
<li class="scroll sliding-middle-out">Features</li>
Note that the line isn't made with the border property but with the background of the pseudo element