I'm a really basic coder, so please bear with me if my question sounds silly. I'm using Bootstrap 3 to make some sort of a gallery page, so there are category filters on top, and rows of images that are responsive (3 horizontally on desktop, 2 on tablet, and 1 on mobile). So I'm currently using a lightbox plugin such that when the user clicks on the thumbnail, it will show a lightbox. So here's the code in HTML:
<div class="container">
<div class="row">
<div align="center" class="filter-categories">
<button class="btn btn-default filter-button" data-filter="all">all</button>
<button class="btn btn-default filter-button" data-filter="fine-art">fine art</button>
<button class="btn btn-default filter-button" data-filter="actor-portraits">portraits</button>
<button class="btn btn-default filter-button" data-filter="landscape">landscape</button>
<button class="btn btn-default filter-button" data-filter="street">street</button>
</div>
</div>
<br/>
<div class="row" align="center">
<!-- fine art-->
<div class="gallery_product filter fine-art col-md-4 col-sm-6 col-xs-12">
<a href="images/fine art photography/image-1.jpg" data-lightbox="gallery" data-image-alt="Image 1"> <img src="images/fine art photography/image-1.jpg" alt="Alt Text" class="gallery-image" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</a> </div>
...
so that when <!-- fine art--> is clicked, it shows up as a lightbox, and arrows will appear to navigate to the next image. For overlay, on hover over the image thumbnail, a black box with text is supposed to show up, but it takes on an extra 15px on the left and right from col-md-4 col-sm-6 col-xs-12, for some weird reason. below is the CSS for the section
/*hover effect*/
/*.gallery_product.col-md-4.col-sm-6.col-xs-12{
padding: 0 !important;
}*/
.gallery_product {
position: relative;
top:0;
left: 0;
}
.gallery-image {
display: block;
width: 100%;
height: auto;
}
.gallery_product {
margin-bottom: 30px;}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #121212;
}
.gallery_product:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
the padding: 0 !important, will simply just remove the spaces between the tiles. I still want to keep the spaces between the tiles, but keep the overlay WITHIN the tiles. I tried this:
<!-- fine art-->
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="gallery_product filter fine-art">
<a href="images/fine art photography/image-1.jpg" data-lightbox="gallery" data-image-alt="Image 1"> <img src="images/fine art photography/image-1.jpg" alt="Alt Text" class="gallery-image" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</a> </div></div>
and it gives me what I want, but then my data-lightbox will not work, the next and previous button becomes disabled. So essentially, I want the first code, but remove the extra sides of the overlay div. Is anyone able to help? Thank you so much!!
This is the shortest solution.
Change this:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #121212;
}
to this:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 15px;
right: 15px;
/* height: 100% */;
/* width: 100% */;
opacity: 0;
transition: .5s ease;
background-color: #121212;
}
Related
I'm trying to create an animation, which moves text up and shows some content when hovered over a card. When hovered over the card, the animation works as expected but when the cursor is placed on top of the text, there's this weird glitch and the text keeps moving up and down.
I've put this up on : https://codepen.io/anon/pen/qGwpaG
My code
HTML
<section class="section" id="black">
<div class="container">
<p class="display-4 d-flex justify-content-center spacing text-center light bold mt-3" id="case-head"> Make something you love.</p>
</div>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-4">
<a href="blog.html" class="hover">
<div class="image">
<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" class="">
</div>
<p class="img-text color bold">Sample - 1</p>
<p class="img-description light">Lorem Ipsum </p>
<i class="fas fa-long-arrow-alt-right img-description arrow"></i>
</a>
</div>
</section>
CSS
.img-text {
padding: 10px;
position: absolute;
bottom: 0px;
left: 16px;
font-size: 30px;
}
.img-description{
position: absolute;
padding: 10px;
bottom: 35px;
left: 16px;
font-size: 20px;
color: white;
}
.image {
position:relative;
width: 100%;
height: auto;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
.color
{
color: white!important;
}
JS
$('.img-description').hide();
$(".hover").mouseover(function() {
$(this).find(".img-text").animate({ bottom: 100 },100);
$(this).find('.img-description').show();
})
$(".hover").mouseout(function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find('.img-description').hide();
})
You need to make sure that only the parent element is triggering the events. When using mouseover/mouseout, any child element will also trigger these events, which you don't want.
To fix this, you can either use mouseenter/mouseleave or, even better, use the hover shorthand:
$(".hover").hover(
function() {
$(this).find(".img-text").animate({ bottom: 100 }, 100);
$(this).find(".img-description").show();
},
function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find(".img-description").hide();
}
);
https://codepen.io/anon/pen/mYgxWv
I am working on a Bootstrap-project with some anchors-links. After clicking them my css doesn't work anymore.
HTML:
<a class="navbar-brand" href="#SectionID">GoToSection</a>
<div class="jumbotron">
<div class="container">
<h3 id="SectionID">Section With ID</h3>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more ยป</a></p>
</div>
</div>
CSS:
.jumbotron::before {
margin-top: -13.4505%;
top: 0;
transform: rotate(-7.73deg);
transform-origin: 100% 100% 0;
}
.jumbotron::before, .jumbotron::after {
background: white none repeat scroll 0 0;
content: " ";
display: block;
height: 0;
padding-top: 13.4505%;
position: absolute;
right: 0;
width: 100.917%;
}
*::before, *::after {
box-sizing: border-box;
}
.jumbotron::after {
top: 100%;
transform: rotate(7.73deg);
transform-origin: 100% 0 0;
}
.jumbotron {
overflow: hidden;
position: relative;
}
You can see it in this fiddle.
Afer clicking on 'GoToSelection' the .jumbotron looses it's padding-top. When I disable and then enable the property with firebug it woks again.
There is nothing wrong with CSS or HTML.
The jumbotron is not loosing its padding either. What's actually happening here is that. when you click on the link "GoToSection" which has a href value "#SectionID", it is actually scrolling to the
<h3 id="SectionID">Section With ID</h3> .
I found a good contact page that I want reproduce, see this link at Contatti section.
I'm using Initializr with Twitter Bootstrap3.
Here is HTML/css/js structure for Contact Section, I've a gmaps iframe (id="map") inside iframeWrapper placed with position:relative, iframeBlock is a full width/height panel with opacity = 0.7 to overshadow iframe, iframeCont with two panel with some contact link and btn-map and btn-cont to switch between active (no opacity and possibility to make the scroll and to use zoom buttons ) and inactive iframe.
I set position:absolute for all other element inside a iframeWrapper.
$('#btn-map').click(function(){
$('#iframeBlock').hide();
$('#iframeCont').hide();
$('#btn-map').css('display','none');
$('#btn-cont').css('display','block');
});
$('#btn-cont').click(function(){
$('#iframeBlock').show();
$('#iframeCont').show();
$('#btn-map').css('display','block');
$('#btn-cont').css('display','none');
});
#cont{
width: 100%;
height: 100%;
padding-top: 50px;
text-align: center;
background: #fff;
}
#map{
z-index:5;
width: 100%;
padding: 0;
}
#iframeWrapper{
position: relative;
}
#iframeBlock{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
opacity:0.7;
background: #000;
z-index: 6;
text-align:center;
}
#iframeCont{
position: absolute;
top:20%;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 7;
text-align:center;
}
.cont-element{
background: #0b5394;
color:#FFF;
margin-bottom: 5%;
border-radius: 10px;
padding: 3%;
font-size: 1.2em;
}
#btn-map{
position: absolute;
top:70%;
left:25%;
z-index: 7;
opacity: 1;
background: #cc0000;
color: #FFF;
border-color: #FFF;
display:block;
}
#btn-cont{
position: absolute;
top:70%;
left:30%;
z-index: 7;
opacity: 0.7;
background: #FFF;
color: #000;
border-color: #cc0000;
display:none;
}
<!-- Contatti Section -->
<section id="cont" class="cont-section">
<div class="container-fluid">
<div class="row-fluid">
<div id="iframeWrapper">
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2786.232975915266!2d8.878734115818997!3d45.70636282527264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478688abc9247355%3A0x59d85ca1774dc65a!2sASD+Pallacanestro+Lonate+Ceppino!5e0!3m2!1sit!2sit!4v1445187794194" frameborder="0" style="border:0" allowfullscreen></iframe>
<div id="iframeBlock">
</div>
<div id="iframeCont">
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-8 cont-element">
<i class="fa fa-mobile"></i> </br> <a href:"tel:xxxxxxxx">xxxxxxxx</a> <span>Giovanni</span>
</div>
<div class="col-xs-2">
</div>
</div>
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-8 cont-element">
<i class="fa fa-envelope"></i> </br> xxxxxxxx#gmail.com
</div>
<div class="col-xs-2">
</div>
</div>
</div>
<button id="btn-map" class="btn btn-info btn-lg"><i class="fa fa-map-o"></i> <strong>Visualizza Mappa</strong></button>
<button id="btn-cont" class="btn btn-info btn-lg"><i class="fa fa-phone"></i> <strong>Contattaci</strong></button>
</div>
</div>
</div>
<!-- begin snippet: js hide: false -->
Everything works but I have a padding of 15px around iframeWrapper due to container-fluid and then see two white borders on the left and right side.
I tried to reset the padding for the container-fluid to zero, but It displays a horizontal scroll bar and it is as if the content is outside the viewport.
Image that show contact section
Could you help me? Thanks
analyzing the code with Google Chrome Developers Tool, I found that two rows exceed viewport width. (For example, if viewport width is 380px, the row width is 410px), so I write this CSS rule:
#iframeCont .row{
width: 100%;
}
which refers just to the two rows, and now I have no more white space around my iframe.
But for me is a bad solution! I probably poorly designed html structure!
I have a container div with an image overlayed on top of it.
I want to center this container div within a basic popin. I am sure it has something to do with the overlay approach I am using within the CSS, but I cannot figure it out. How can I center the container dev within the popin?
EDIT: There are several of these blocks placed in-line.
CSS and HTML are as follows:
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; left: 0; }
.popin{
background:#fff;
padding:15px;
box-shadow: 0 0 20px #999;
border-radius:2px;
}
#underlay1 {
width: 320px;
height: 320px;
position: relative;
}
#underlay2 {
width: 320px;
height: 320px;
position: relative;
}
<div class="row">
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay1"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay2"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
</div>
Underlay is receiving an image from an API. overlayimage.gif is another image being placed on top.
Just remove float: left; from .containerdiv and give text-align: center; to .popin will solve your issue.
You can center absolute div like following way:
left: 50%;
transform: translate(-50%, 0px);
http://jsfiddle.net/5z2k1b1r/
Edit:
use margin: 0 auto; for #underlay as per your expected output.
Check Fiddle
I'm using bootstrap's carousel ( http://twitter.github.com/bootstrap/javascript.html#carousel ) to show a user submited gallery. Because it's user submited, it doesnt look very good with the rest of my website design thats why i want to add a layer mask on top off everything
Here is the mask : http://img52.imageshack.us/img52/2659/degrade.png
Unfortunatly, I'm unable to show that particular div...
It has to be non clickable because when a user click on a picture of the carousel, it opens modal popup with the full sized picture.
My css (its using less but you get the idea):
.carousel {
width: 292px;
height: 163px;
.carousel-inner {
width: 292px;
height: 163px;
img {
width: 100%;
height: 100%;
}
}
}
.carousel-control {
margin-top: 0;
top: 0;
right: 0;
background: none;
border: 0;
width: 60px;
height: 163px;
opacity: 0.65;
background-repeat: no-repeat;
&:hover.right {
background-image: url('/assets/index/r_arrow.png');
}
&:hover.left {
background-image: url('/assets/index/l_arrow.png');
}
}
heres is my html:
<div class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="thumbnail1.jpg" />
</div>
<div class="item">
<img src="thumbnail2.jpg" />
</div>
<div class="item">
<img src="thumbnail3.jpg" />
</div>
</div>
<a class="carousel-control left" href=".carousel" data-slide="prev"> </a>
<a class="carousel-control right" href=".carousel" data-slide="next"> </a>
</div>
Depending on your cross-browser support needs, you could try giving the overlay pointer-events: none. Here's an example of that.
If you insert <div class="overlay"></div> into .carousel-inner, give .carousel-inner {position: relative;} and
.overlay {
background: url(http://img52.imageshack.us/img52/2659/degrade.png) top left no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
There's an answer here that gives information and links to solutions using javascript. Unfortunately, the resources for the accepted answer to the linked question have gone offline, but there is a fairly simple demonstration here: http://jsbin.com/uhuto