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/
Related
my visitors with the Iphone (Safari browser) complain that my menu isn't working. So I tried it in an emulator and found that there is not working hover or transition. On Android it's working all great.
/* Content menu */
.navigation_bg {
width:100%;
height:65px;
background:#272d33;
display:block;
}
.navigation_content {
min-width:400px;
height:65px;
max-width:1200px;
background:#272d33;
margin:0 auto;
text-align:center;
display: table;
width:100%;
overflow:hidden;
}
a.navigation {
display: table-cell;
vertical-align: middle;
border:0px;
text-align:center;
width:140px;
height:65px;
text-transform:uppercase;
font-weight:normal;
background:transparent;
overflow: hidden;
font-size:14px;
word-wrap: break-word;
padding-top:5px;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
a.navigation img {
height:35px;
width:35px;
}
a.navigation::after {
content: '';
display: block;
width: 100%;
height: 5px;
background: #f23030;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
position:relative;
top:23px;
}
a.navigation:hover::after {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
a.navigation:focus::after {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
a.navigation:active::after {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.mobile_menu {
display:none;
min-width:400px;
max-width:750px;
width:100%;
height:65px;
background:transparent url('../img/menu.png') no-repeat;
background-position: right 10px center;
}
#media only screen and (max-width: 750px) {
.mobile_menu {
display:block;
}
.navigation_content {
display:block;
background:#272d33;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
height:305px;
}
a.navigation::after {
top:10px;
}
a.navigation {
min-width:400px;
width:100%;
display:block;
padding-top:10px;
height:40px;
background:#272d33;
}
a.navigation img {
height:25px;
width:25px;
}
.navigation_bg {
height:65px;
overflow:hidden;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.navigation_bg:hover {
height:305px;
background:#f23030;
}
}
/* End Content menu */
<div class='navigation_bg'>
<div class='mobile_menu'>
</div>
<div class='navigation_content'>
<a href='/novinky' class='navigation white'>Novinky</a>
<a href='/navody' class='navigation white'>Návody</a>
<a href='/forum' class='navigation white'>Fórum</a>
<a href='' class='navigation white'>---</a>
<a href='/ostatni' class='navigation white'>Ostatní</a>
<a href='/social' class='navigation'><img src='img/yt.png' alt='Youtube'> <img src='img/fb.png' alt='Facebook'></a>
</div>
</div>
Do you have any idea where the problem could be?
There is an issue with hovering status and transition rendering iOs Safari. Note that busing an :hover pseudo-class is a non complient way to make menu works.
For example 2 ways to make a menu :
1. Use a label (linked to a hidden checkbox) and place it your toggle button
2. Use javascript to make menus toggle a class
I want text on image hover just like in this website. Using CSS3
https://addapinch.com/
You can try with this (just adopt the color and the divs)
Here is the HTML:
<div class="container">
<div class="row">
<div class="col-md-3 row_cont">
<img class="image_box" src="path_to_the_image" id="image"/>
<div id="overlay">
desired text
</div>
</div>
<div class="col-md-3 row_cont">
<img class="image_box" src="path_to_the_image" id="image"/>
<div id="overlay">
desired text
</div>
</div>
<div class="col-md-3 row_cont">
<img class="image_box" src="path_to_the_image" id="image"/>
<div id="overlay">
desired text
</div>
</div>
<div class="col-md-3 row_cont">
<img class="image_box" src="path_to_the_image" id="image"/>
<div id="overlay">
desired text
</div>
</div>
</div>
</div>
Here is the CSS:
.row_cont {
position:relative;
width:95%;
height:240px;
margin-bottom: 20px;
}
.row_cont {
position:relative;
width:95%;
height:240px;
margin-bottom: 20px;
}
#image {
position:absolute;
width:95%;
height:240px;
/* background:black; */
}
#overlay {
position:absolute;
width:95%;
height:240px;
background: #fff;
opacity: 0;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}
#overlay:hover {
opacity: .95;
box-shadow: 0px 0px 30px 3px #000;
}
a.link_hover {
position: relative;
top: 45%;
left: 13%;
font-size: 26px;
font-weight: 600;
text-transform: uppercase;
color: rgba(2, 103, 193, .7);
text-decoration: none;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
a.link_hover:hover {
color: rgba(2, 103, 193, 1);
}
.image_box:hover {
-ms-filter: blur(3px)!important;
filter: blur(3px)!important;
cursor: pointer;
}
Let me know if it is this was helpful
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;
}
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;
}
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;
}