I am trying to use CSS only to create a hover popup / tooltip over a word in a paragraph - It works to an extent but the problem is it leaves big gaps in the paragraph - please help me, I am losing the will here...
HTML
.hover {
position:relative;
top:0px;
left:0px;
line-height: 100%;
display:inline-block;
}
.tooltip {
top:-10px;
background-color:#6b9aff;
color:white;
border-radius:5px;
opacity:0;
position:relative;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
line-height: 100%;
}
.hover:hover .tooltip {
opacity:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<p>We have taken the json and <span class="hover"> csv<span class="tooltip">CSV definition</span></span>files and put them into a <span class="hover"> SQL <span class="tooltip">SQL definition</span></span> database</p>
</div>
</body>
</html>
.hover {
position:relative;
top:0px;
left:0px;
line-height: 100%;
display:inline-block;
}
.tooltip {
top:-15px;
width:100px;
position:absolute;
background-color:#6b9aff;
color:white;
border-radius:5px;
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;
line-height: 100%;
}
.hover:hover .tooltip {
opacity:1;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<p>We have taken the json and <span class="hover"> csv<span class="tooltip">CSV definition</span></span>files and put them into a <span class="hover"> SQL <span class="tooltip">SQL definition</span></span> database</p>
</div>
</body>
</html>
Change position: relative into position: absolute :
.hover {
position:relative;
top:0px;
left:0px;
line-height: 100%;
display:inline-block;
}
.tooltip {
top:15px;
background-color:#6b9aff;
color:white;
border-radius:5px;
opacity:0;
position:absolute;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
line-height: 100%;
}
.hover:hover .tooltip {
opacity:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<p>We have taken the json and <span class="hover"> csv<span class="tooltip">CSV definition</span></span>files and put them into a <span class="hover"> SQL <span class="tooltip">SQL definition</span></span> database</p>
</div>
</body>
</html>
Try this css.
.hover {
position:relative;
top:0px;
left:0px;
line-height: 100%;
display:inline-block;
}
.tooltip {
top:-15px;
background-color:#6b9aff;
color:white;
border-radius:5px;
opacity:0;
position:absolute;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
line-height: 100%;
}
.hover:hover .tooltip {
opacity:1;
}
Related
I would like to have rotate and zoom efect on pictures here
http://cpband.itvp.eu/
, but i would like to keep them croped in the same box.
like here
http://cpband.itvp.eu/test.php
trick should be in
overflow: hidden;
, but I am not able to figureout how to make it work.
Thanks for the tips!
you may add the rotation to the container :
.pic {
overflow: hidden;
}
.grow img, .grow {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow:hover {
transform:rotate(15deg);
}
.grow:hover img {
width: 400px;
height: 400px;
}
/* DEMO PURPOSE */
html {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>
or is only to the image ? Also, transform can do both(zoom&rotate)
.pic {
overflow: hidden;
}
.grow img, .grow {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow:hover img {
transform:rotate(15deg) scale(1.25);
}
/* DEMO PURPOSE */
html {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>
Html:
<div id="container">
<img src="picture.jpg" id="picture" />
</div>
Css:
#container{
overflow:hidden;
width:100px;
height:100px;
}
#picture{
height:300px;
width:300px;
}
I have four elements with text, some of which has text on two lines. I want to place the text in the center of the element, which I've done with text-align. However, the text that is on two lines I would like to be left-aligned with itself so it's flush to the left.
Like this:
First Line of text
Second line of text
JS Fiddle: http://jsfiddle.net/nj1pnnoj/1/
HTML:
<body>
<div id='nw' class='bg'>
<div class='overlay'>
<span class='caption'>Night <br /> Life</span>
</div>
</div>
<div id='ne' class='bg'>
<div class='overlay'>
<span class='caption'>News</span>
</div>
</div>
<div id='sw' class='bg'>
<div class='overlay'>
<span class='caption'>Food & Drink</span>
</div>
</div>
<div id='se' class='bg'>
<div class='overlay'>
<span class='caption'>Events</span>
</div>
</div>
</body>
CSS:
body {
background: url('http://www.bootply.com/assets/example/bg_blueplane.jpg');
height:100%;
margin:0;
padding:0;
}
div.bg {
position:fixed;
width:50%;
height:50%
}
#nw {
top:0;
left:0;
background-image: url('clevelandnight.jpg');
background-size:cover;
text-align: center;
text-align-last:left;
}
#ne {
top:0;
left:50%;
background-image: url('news1.jpg');
background-size:cover;
}
#sw {
top:50%;
left:0;
background-image: url('drinks1.jpg');
background-size:cover;
text-align: center;
}
#se {
top:50%;
left:50%;
background-image: url('clevelandday.jpg');
background-size:cover;
text-align: center;
}
.overlay {
height:100%;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
-ms-transition: all .4s ease-out;
transition: all .4s ease-out;
}
.bg:hover .overlay {
background:rgba(0, 0, 0, .75);
opacity: 1;
height:100%;
}
.caption {
font-family: 'Open Sans Condensed', sans-serif;
font-weight:100;
color:white;
z-index:100;
font-size:24pt;
-webkit-transition: font-size .4s ease-out 1s;
-moz-transition: font-size .4s ease-out 1s;
-o-transition: font-size .4s ease-out 1s;
-ms-transition: font-size .4s ease-out 1s;
}
.bg:hover .caption {
font-size:72px;
}
You can add text-align: left and display: inline-block to the inner span elements:
.overlay span{
text-align:left;
display: inline-block;
}
http://jsfiddle.net/nj1pnnoj/2/
I'm trying to make this Edge animate animation http://www.instagib.dk/mainlinks.html into pure css. I don't know if it possible, but it could be awesome for some tips or help.
I have a fiddle, where I'm trying to do it.
"http://jsfiddle.net/MikkelMadsen/9KjL8/"
HTML:
<div class="product-wrap">gå til varen
<div class="produkt-img-bg">
<div class="produkt-img"><img src="http://www.instagib.dk/anatomical_sole.png" width="300" height="140"/>
</div>
</div>
<div class="produkt-text">Anatomical</div>
<div class="slide">
<div class="slide-hover"></div>
</div>
</div>
CSS:
product-wrap {
width:300px;
height:290px;
display: table-cell;
vertical-align: bottom;
}
.produkt-img-bg {
width:300px;
height:155px;
background:url(http://www.instagib.dk/anatomical_bg.png) no-repeat;
}
.produkt-img{
width:300px;
height:140px;
}
.produkt-img:hover{
-webkit-transition: opacity 1s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
filter: alpha(opacity=30);
opacity:0.5;
background-color:#57b6dd;
}
.produkt-img img {
width:300px;
height:140px;
-webkit-transition: all 0.5s ease; /* Safari and Chrome */
-moz-transition: all 0.5s ease; /* Firefox */
-ms-transition: all 0.5s ease; /* IE 9 */
-o-transition: all 0.5s ease; /* Opera */
transition: all 0.5s ease;
}
.produkt-img:hover img {
width:300px;
height:140px;
-webkit-transform:scale(1.1); /* Safari and Chrome */
-moz-transform:scale(1.1); /* Firefox */
-ms-transform:scale(1.1); /* IE 9 */
-o-transform:scale(1.1); /* Opera */
transform:scale(1.1);
}
.produkt-text{
width:300px;
height:123px;
}
.slide{
width:300px;
height:12px;
background-color:#B8B7B7;
}
.slide-hover{
width:300px;
height:12px;
}
.slide-hover:hover{
-webkit-animation: slider 0.5s normal forwards linear;
-moz-animation: slider 0.5s normal forwards linear;
-o-animation: slider 0.5s normal forwards linear;
animation: slider 0.5s normal forwards linear;
animation-iteration-count: 1;
width:300px;
height:12px;
background-color:#000;
}
#-webkit-keyframes slider {
from {
width: 0%;
}
to {
width: 100%;
}
}
Hoping for css wizard to help me out:)
You Effect converted into css >> Hover Effect
HTML
<div class="product-wrap">
<div class="image-wrap">
<div class="img-container">
<div class="produkt-img">
<img src="http://www.instagib.dk/anatomical_sole.png" width="300" height="140">
<div class="title">Arch Mid<br> <span class="subtitle">Subtitile</span>
</div>
<div class="overlay">Product Name</div>
</div>
<div class="pricetag">250,00 Kr.</div>
<div class="graybar"></div>
<div class="blackbar"></div>
</div>
</div>
css
.product-wrap {
background:url(http://www.instagib.dk/anatomical_bg.png) no-repeat;
width:300px;
height:290px;
display: table-cell;
vertical-align: bottom;
position:relative;
border:1px solid #ccc;
transition:all 0.4s ease-out;
font-family:sans-serif;
transition:all 1s ease;
cursor:pointer;
}
.product-wrap:hover img {
transform:scale(1.1);
transition:all 0.42s ease;
}
.product-wrap:hover .overlay {
opacity:1;
}
.product-wrap:hover .blackbar {
width:100%;
}
.image-wrap {
width:300px;
height:155px;
}
.produkt-img {
position:absolute;
top:0;
transition:all 1s ease;
}
.product-wrap img {
transition:all 0.42s ease;
}
.overlay {
position:absolute;
top:0;
width:100%;
height:98%;
background:rgba(123, 217, 253, 0.6);
opacity:0;
transition:all 0.6s ease;
color:#fff;
font-size:28px;
line-height:5;
vertical-align:middle;
text-align:center;
}
.graybar {
position:absolute;
bottom:0;
right:0;
height:13px;
width:100%;
background-color:#cecece;
}
.blackbar {
position:absolute;
bottom:0;
left:0;
height:13px;
width:0%;
background-color:#000;
transition:all 0.3s ease-in;
}
.pricetag {
padding-right:2px;
position:absolute;
bottom:13px;
left:0;
height:30px;
width:100%;
font-size:22px;
text-align:right;
}
.title {
padding-right:2px;
position:absolute;
bottom:13px;
top:160px;
left:0;
height:30px;
width:100%;
font-size:35px;
text-align:center;
}
.subtitle {
color:#ccc;
font-size:18px;
}
I'm trying to do an image hover effect in which a link move from top:0 to top:40%.The problem is that the link appear directly on top:40% when I hover the image. This is my code:
<div class="featured">
<div class="img-hover">
<i></i>
</div>
<img src=""/>
</div>
.featured .img-hover {
width:100%;
float:left;
height:100%;
position:absolute;
display:none;
background:rgba(26, 188, 156, 0.6);
}
.featured:hover .img-hover {
display:block;
}
.featured .img-hover a{
width:50px;
height:50px;
float:left;
position:absolute;
top:0;
font-size:2rem;
line-height: 4rem;
opacity:1;
margin-right:20px;
border-radius:50px;
border:2px solid #fff;
color:#fff;
text-align:center;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
.featured:hover .img-hover a{
top:40%;
}
Your transition is on the a tag, it works better on just the ".featured .img-hover" level. Also, the transition of the "display:none" wasn't working well. I updated it to transition from opacity 0 to 1, and it looks better. Below is the JSFiddle and minorly updated CSS. Take a look and tweak if you'd like.
http://jsfiddle.net/UVjFz/
.featured .img-hover {
width:100%;
float:left;
height:100%;
position:absolute;
opacity:0;
background:rgba(26, 188, 156, 0.6);
}
.featured:hover .img-hover {
display:block;
}
.featured .img-hover a{
width:50px;
height:50px;
float:left;
position:absolute;
top:0;
font-size:2rem;
line-height: 4rem;
opacity:1;
margin-right:20px;
border-radius:50px;
border:2px solid #fff;
color:#fff;
text-align:center;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
.featured:hover .img-hover a{
top:40%;
}
.featured:hover .img-hover {
display:block;
opacity:1;
}
.featured .img-hover {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
How do I add a transition to this rollover?
Here is my css so far:
.img-container {
width: 401px;
height: 267px;
position: relative;
}
.img-container:hover .square-icon {
display: block;
}
.square-icon {
opacity: .5;
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background: url(images/zoom-icon.png) center center no-repeat;
background-color: #FF3860;
cursor:pointer;
display:none;
}
And here is the html:
<div class="img-container">
<img alt="lorem" width="401" height="267" src="images/450-300-13.png">
<div class="square-icon"></div>
</div>
I know I need to add:
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
But I'm not sure where to add it?
You need to set the two states (normal and hover) of .square-icon to have different levels of opacity and then you can transition on opacity.
See my jsBin demo here
.img-container:hover .square-icon {
opacity: 1;
}
.square-icon {
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background: url(images/zoom-icon.png) center center no-repeat;
background-color: #FF3860;
cursor:pointer;
opacity: 0;
transition: display 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
}