I'm trying to center a button on an image with responsive property. I'm using boostrap 3. Currently I've used CSS margin-left and margin-right to center but of course this is not efficient especially when viewed on smaller viewports.
Here's my CSS
.gallery-list > li .gallery-thumbnail i{
top: 80px;
color: red;
opacity: 0;
position: absolute;
font-size: 50px;
display:block;
margin-left: 120px;
background-color: transparent;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
}
.gallery-list > li:hover .gallery-thumbnail i{
opacity: 1;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
}
Large screen display:
Small screen display:
So question is, how do I center the button irrespective of the device viewport?
That's b/c your margin is not responsible. It uses absolute values; prefer :
margin-left: auto;
margin-right: auto;
You can use bootstrap's helper class center-block
http://getbootstrap.com/css/#helper-classes-center
Or just add
margin-left:auto;
margin-right:auto;
Adding
margin-left: auto;
margin-right: auto;
will not resolve the issue as the element is positioned absolutely. Please try the code below:
.gallery-list > li .gallery-thumbnail {
position: relative;
display: block;
}
.gallery-list > li .gallery-thumbnail i {
position: absolute;
top: 50%;
margin-top: -25px; /* your icon height devided by 2 */
left: 50%;
margin-left: -21px; /* your icon width devided by 2 */
font-size: 50px;
color: red;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.gallery-list > li:hover .gallery-thumbnail i{
opacity: 1;
}
Related
I am making a slideshow. The parent container is called slide and has the following child elements:
prev, next and figure.
I would like the parent div to be the same size as the child element 'figure' so that the next and prev divs are aligned to the right and left of the 'figure' element. I do not wish to set the width and height of the parent fixed as it would not be responsive.
I do not wish to add the 'next' and 'prev' divs inside the 'figure' element as i plan to have a lot of figure element and would not like it to be repetitive, adding these divs inside each figure element.
/* Styles go here */
.slide{
padding: 0;
width: 100%;
display: inline-block;
margin: 0 auto;
position: relative;
}
.slide:before{
display: block;
padding-top: 25%;
}
.next, .prev{
color: #fff;
position: absolute;
background: rgba(0,0,0, 1);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: 0.9;
user-select: none;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
figure{
width: 100%;
position: absolute;
opacity: 0;
margin:0;
padding:0;
transform: scale(0);
transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
}
img{
width: 100%;
height: auto;
border-radius: 3px;
}
figcaption{
position: absolute;
font-family: sans-serif;
font-size: 1em;
bottom: .35em;
right: .15em;
color: #fff;
background: rgba(0,0,0, .9);
border-radius: 3px;
padding: .2em;
}
figcaption a{
color: #fff;
}
figure.show{
width: 100%;
opacity: 1;
position: absolute;
transform: scale(1);
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
}
<div id='slide' class='slide'>
<figure id="0" class="show">
<img src="http://www.naamagazine.com/wp-content/uploads/2016/05/couple-getaways-image-520x400.jpeg">
<figcaption>Some Text</figcaption>
</figure>
<span class="prev">‹</span>
<span class="next">›</span>
</div>
I would just like the parent to be responsive and same size as the child element with prev and next divs attached to the parent.
The buttons actually are aligned to the edges of the container already - the issue is just that the image doesn't scale up along with it. In your style.css, change this:
img{
max-width: 100%;
to this:
img{
width: 100%;
and you should see the image edges and the arrows line up, and scale as the window does.
As far as getting the arrows vertically centered - that could be tricky unless you set a height on the .slide element. This can still be responsive, as long as you know the aspect ratios of the images in the slides. Here's a trick to do that using bottom padding - set it based on the aspect ratio you want. Then set your images to width: 100%; height: 100%; position: relative; and as long as the proportions are right, they should all fit properly.
figure {
position: absolute;
width: 100%;
height: 0;
/* This will make a box that's always twice as wide as it is tall */
padding-bottom: 50%;
/* This one's twice as tall as it is wide */
padding-bottom: 200%;
}
HTML
<input type="checkbox" id="op">
</input><div class="lower">
<label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
CSS
#import "http://webfonts.ru/import/notcourier.css";
body{ background:url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg')
}
.lower{
width:340px;
margin:10% auto;
padding:50px;
background:white;
opacity:0.8;
color:black;
box-shadow:inset 0 0 0 1px black;
border:30px solid white;
}
.lower:hover{
background:black;
color:white;
box-shadow:inset 0 0 0 1px white;
border:30px solid black;
}
input{
display:none;
}
.lower label{
font-family: 'NotCourierSans';
text-transform:uppercase;
font-size:40px;
text-align:center;
}
.lower label:hover{
cursor:pointer;
}
.overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.9);
}
.overlay label{
width: 58px;
height:58px;
position: absolute;
right: 20px;
top: 20px;
background: url('http://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
z-index: 100;
cursor:pointer;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: white;
text-decoration:none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
font-family: 'NotCourierSans';
text-transform:uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #849368;
}
.lower~.overlay-hugeinc{
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#op:checked~.overlay-hugeinc{
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
-moz-perspective: 300px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
#op:checked~.overlay-hugeinc nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#op:not(:checked)~.overlay-hugeinc nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
Full screen overlay menu (pure css)
Hello, I'm using this code to make an overlay menu with just css. Its works fine but I want it to close when I click a menu link, not just the close icon.
This will be an one page design website, so the menu ideally will slide down and away and the new content displayed.
Try including data-toggle and data-target selectors on your menu list items.
<li>Home</li>
$('.overlay ul li a').click(function() {
$('#op').attr('checked', false); // Unchecks it
});
I was trying to fix it with just css but no progress. Then I try using jquery and it's working. If you have a better solution please post. Thanks all.
If you didn't want to use jQuery for the page load time/performance issue, you could have turned each menu item into a checkbox. Since your site is a single page, using checkbox for navigation would have simplified your code as well; killing two birds with one stone. :D
this question is a follow on from my previous question.
I have some style used from this website, to create a slide in underline effect, please see example on this jsfiddle.
My previous question was asking how to adapt this so the line came in from right to left, and on top of the text, please see example on this jsfiddle.
My next step is to add both of these to one element, so one line slides in from left to right on the bottom, and the other right to left on top.
When I tried to add both of these together, it seems to only display the top one, please see this jsfiddle.
My question is how do I add both the top slide in line and the bottom slide in line to an element?
.cmn-t-underline {
position: relative;
color: #ff3296;
}
.cmn-t-underline:after {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #2E9AFE;
content: "";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
.cmn-t-underline:hover {
color: #98004a;
}
.cmn-t-underline:hover:after {
width: 100%;
height:2px;
}
.cmn-t-overline {
position: relative;
color: #ff3296;
}
.cmn-t-overline:after {
display: block;
position: absolute;
right: 0;
top: -10px;
width: 0;
height: 10px;
background-color: #2E9AFE;
content: "";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
.cmn-t-overline:hover {
color: #98004a;
}
.cmn-t-overline:hover:after {
width: 100%;
height:2px;
}
<h1 class="cmn-t-underline cmn-t-overline">Test</h1>
You have to make use of :before for your top line, and :after for your bottom line.
The way you are doing it the second ":after" overrides the first so you end up with only one line.
I have edited your jsFiddle :
http://jsfiddle.net/7k4rLdno/
I only changed the second :after with :before and everything works well.
You can't have two :after or two :before the the exact same element.
use
:before - top line
:after - bottom line
h1{
position: relative;
color: #ff3296;
}
h1:before,
h1:after {
display: block;
position: absolute;
width: 0;
height: 10px;
background-color: #2E9AFE;
content:"";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
h1:before {
left: 0;
top: -10px;
}
h1:after {
right: 0;
bottom: -10px;
}
h1:hover {
color: #98004a;
}
h1:hover:after,
h1:hover:before {
width: 100%;
height:2px;
}
<h1>Test</h1>
Fiddle
So basically I got this transition.
At the beginning height is 0 and when you hover the DIV specified height becomes 100px.
it all works smoothly except, the height starts from the top.
How can I make it start from bottom?
this is what I mean.
http://i.stack.imgur.com/HHBVY.gif
So how can i make it slide from down to up?
This is the css I am using for this.
.bd-box tr td .bd-name {
background: rgba(186,0,0,.8);
width: 100px;
height: 0;
text-align: center;
margin-top: -20px;
position: absolute;
opacity: 1;
transition: .3s ease-in-out;
overflow: hidden;
}
.bd-box tr td:hover .bd-name {
height: 20px;
}
Use positioning and move the element up rather than changing the height.
div
{
width: 100px;
height: 100px;
position: relative;
background: black;
overflow: hidden;
}
div div
{
background: red;
position: absolute;
top: 100px;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
div:hover div
{
top: 80px;
}
JSFiddle
I'm trying to show a thumbnail caption on hover centered: aligned horizontal and vertical, but not successful.
In the fiddle you see a responsive thumbnail grid with on hover a caption. I gave it a dashed red border so you can see that it is not same size as the thumbnail. I can't get the title caption to be centered in the thumbnail. Maybe my thumbnail grid need a different build. Hope someone can help me.
Here is the fiddle
#content {
position: relative;
display: inline-block;
margin: 110px 40px 100px 40px;
background-color: transparent;
}
.col-25 {
position: relative;
float: left;
width: 25%;
margin: 0;
}
.thumb {
display: block;
margin: 10px;
}
.col-25 img {
width: 100%;
height: auto;
}
.col-25 a:hover img {
opacity: 0.1;
}
.caption {
position: absolute;
top:0;
left:0;
border: dashed 1px red;
width:100%;
height:100%;
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.col-25 a:hover .caption {
opacity: 1;
}
http://jsfiddle.net/a0zwecou/14/
I have added an inner div to caption and give it a margin height of 25%. Remove the margin for extremely small width size in your media query.
<div class="caption">
<div class="inner-caption">
<h3>Untitled for now</h3>
<p>Caption</p>
</div>
</div>
CSS -
.inner-caption{margin-top:25%;}
JSFIIDLE
only by changing the height and adding padding to caption class.
.caption {
position: absolute;
padding-top:25%;
top:0;
left:0;
border: dashed 1px red;
width:100%;
height:60%;
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
Try this,
.thumb:hover{border:1px dashed red;background-color:red;}
.caption {
position: absolute;
top:40%;
left:0;
/*border: dashed 1px red;*/ //remove it
width:100%;
/*height:100%;*/ // remove it
opacity: 0;
text-align:center;
vertical-align: middle;
z-index:2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
Fiddle : http://jsfiddle.net/a0zwecou/20/
see the fiddle here:
http://jsfiddle.net/a0zwecou/13/
and add css:
.caption h3 {
margin-top: 59px;
}
You can simply wrap your caption inside another div and centered that with transate(with all prefixes of course), OR you can simply center that using tables (table + table-cell)
HERE THE PEN, hover the first.
.insideCap{
background: red;
top: 50%;
position: absolute;
width: 100%;
transform: translateY(-50%);
}
OTHER WAY:
parent{
dispaly:table;
}
son{
display: table-cell;
vertical-align: middle;
}
you can try this:
<div id="content">
HTML:
Add this div:
<div class="col-25">
<a class="thumb" href="#">
<img src="http://fakeimg.pl/500x310/999/">
<div class="caption"><div class="caption-text"><h3>Untitled for now</h3><p>Caption</p></div></div>
</a>
</div>
CSS:
add this css in your style:
.caption-text {
left: 0;
position: absolute;
right: 0;
top: 32%;
}
SEE JS Fiddle DEMO