I am unable to align image to the width of caption with maintaining the gutter width. I am using bootstrap and also the image is flowing outside the div on hover. Can anybody help me out ?
This is what i am trying to achive : https://awwapp.com/s/43b68655-83a6-4133-ab28-0ec9a4152316/
Pen : http://codepen.io/anon/pen/XbxOMq
HTML :
HOTSPOT TEXTf
<div class="col-md-4 hotspot-wrapper">
<img src="https://newevolutiondesigns.com/images/freebies/hd-widescreen-wallpaper-3.jpg" alt="..." class="img-responsive">
<div class="hotspot-text">
HOTSPOT TEXTf
</div>
</div>
</div>
<div class="col-md-4 hotspot-wrapper">
<img src="https://newevolutiondesigns.com/images/freebies/hd-widescreen-wallpaper-3.jpg" alt="..." class="img-responsive">
<div class="hotspot-text">
HOTSPOT TEXTf
</div>
</div>
</div>
CSS:
.hotspot-wrapper {
position: relative;
overflow: hidden;
margin-bottom:20px;
}
.hotspot-text {
width:100%;
height: 102px;
position: absolute;
bottom: -50px;
transition: all .2s linear;
background: rgba(0,0,0,.7);
color:#fff;
}
.hotspot-wrapper:hover .hotspot-text {
bottom: 0;
}
.hotspot-wrapper img {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.hotspot-wrapper:hover img {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
You should make your CSS for these two classes like this, so the hotspot for the text will be aligned with the image :
.hotspot-text {
height: 102px;
position: absolute;
bottom: -50px;
right:0px;
left:0px;
transition: all .2s linear;
background: rgba(0,0,0,.7);
color:#fff;
}
.hotspot-wrapper:hover .hotspot-text {
bottom: 0;
left:0;
right:0;
}
And you should overwrite the padding on the left and on the right set there by default with bootstrap. Like that, the image will have the full width of the div.
.col-lg-4 ,.col-md-4,col-sm-4,col-xs-4{
padding-left:0px;
padding-right:0px;
}
Here's a Fiddle
Related
I have two divs, one carrying the content, the other one existing for the sole purpose of having a background image set to blur on hover.
Both of them are placed in a single container, appear as they should, though the problem is that when I hover over the content div, logically (given the structure of the code I've written), the blur rule set to the background div is no longer active.
My question is how can I get it to work so that when I hover over the content div, the background stays blurred, or whether it is even achievable through pure HTML/CSS
.col-lg-6 {height: 100%; margin: auto; padding: 0; border: none}
.container {height: 100%; ; background: #333333; }
.content {position: absolute; z-index: 10;}
.bg {height: 100%;; background-image: url(bg.jpg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;}
.bg:hover {-webkit-filter: blur(15px);}
<a href="#">
<div class="col-lg-6 col-sm-12">
<div class="container">
<div class="content">
<img src="icon.png" class="img-responsive">
<h2>Icon</h2>
</div>
<div class="bg">
</div>
</div>
</div>
</a>
You can check for the mouseover event and then set a class to the element, so it will stay with the "blurred" effect.
You can use jQuery for that, as below:
$(document).ready(function () {
$('.bg').on('mouseover', function() {
$(this).addClass('bg-hovered');
});
});
And the class:
.bg-hovered {-webkit-filter: blur(15px);}
See fiddle working: https://jsfiddle.net/guschnwg/bg03hb6k/
You need to change the :hover pseudo-class to your .container class.
Instead of this:
.bg:hover {
-webkit-filter: blur(15px);
}
Do this:
.container:hover .bg {
-webkit-filter: blur(15px);
}
This way, even if you hover the .content element, the blur will still be applied.
.container {
height: 100%;
background: #333333;
position: relative;
}
.content {
position: relative;
z-index: 10;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://fillmurray.com/1000/500) no-repeat center center / cover;
transition: all 0.5s ease;
}
.container:hover .bg {
-webkit-filter: blur(15px);
}
<div class="container">
<div class="content">
<img src="http://placehold.it/50x50" class="img-responsive">
<h2>Icon</h2>
</div>
<div class="bg"></div>
</div>
Looking for some styling CSS help. I want to create an image box (that should be link) with centered text that is diplaying over the image with color half-transparent overlay background. We have such given HTML:
<div class="figure">
<a href="#" class="link1">
<img src="http://www.w3schools.com/css/klematis.jpg" alt="flower Klematis">
<div class="figcaption">Klematis</div>
</a>
</div>
The code is analogical of figure/figcaption HTML5 structure.
Here's the case:
https://codepen.io/anon/pen/dYaYqV
On hover overlay background should hide (which is the case), and opacity of image increase to full.
Problem 1:
Text is not centered with such position setting (absolute).
Problem 2:
The overlay in this example is bigger (in the bottom of the image) due to some styling of , I think, element. Overlay should be exact as the image.
Problem 3:
Text should hide as well as overlay during img mouse hover
No JS if possible, only CSS. Can you help? Thanks, J.
I have edited your codepen example a bit, and i think this is exactly what you want
HTML:
<div id="1" class="figure">
<a href="#" class="link1">
<img src="http://www.w3schools.com/css/klematis.jpg" alt="flower Klematis">
<div class="figcaption"><h4>Klematis</h4></div>
</a>
</div>
CSS:
.figure {
position: relative;
float: left;
width: 10%;
margin-right: 1%;
left:20px;
}
.figure a{
display:block;
width:100%;
height:100%;
position:relative;
z-index:2;
}
.figure a img{
width:100%;
display:block;
}
.figcaption {
font-size: 0.8em;
letter-spacing: 0.1em;
text-align: center;
position: absolute;
top: 0;
left:0;
width:100%;
z-index: 2;
height:100%;
background-color:rgba(0,0,0,.4);
transition:background-color 0.4s ease;
}
.figcaption h4{
position:absolute;
top:50%;
left:50%;
padding:0;
margin:0;
-moz-transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
.figure a:hover .figcaption {
background-color:transparent;
}
sorry, forget to hide text on hover, here is the edited codepen http://codepen.io/gopal280377/pen/QjYyLL
tested on google chrome, hope it works for you
assign width to .figcaption to enable text-align,
moved anchor tag to parent of code block (my preference)
overlay overflow is probably due to undeclared image dimensions,
<a href="#" class="link1">
<div id="1" class="figure">
<img src="http://www.w3schools.com/css/klematis.jpg" alt="flower Klematis">
<div class="figcaption">Klematis</div>
</div>
</a>
.figure {
position: relative;
width: 10%;
height: auto;
background:rgba(92,104,117,0.8);
overflow: hidden;
}
.figcaption {
position: absolute;
font-size: 0.8em;
width: 100%;
letter-spacing: 0.1em;
text-align: center;
top: 50px;
z-index: 1 !important;
}
.figure img {
width: 100%;
opacity: 0.5
}
.link1:hover img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.link1:hover .figcaption {
display: none;
background:rgba(92,104,117,0.0);
}
I was wondering what would be the most efficient way to place a rotated text directly outside the image's top left corner? Please keep in mind that I would like it if the height of the text box aligns with the height of the image, and the image scale will vary (tall images, short image, wide images, etc.)
Here is a visual of what I would like to achieve:
How might I do this? Thank you in advance!
Whoops, forgot to add the jsfiddle. You can view it here!
.image.information {
display:block;
position:absolute;
margin:0;
top:45%;
left:100%;
height:100%;
-webkit-transition:all 250ms linear;
-o-transition:all 250ms linear;
transition:all 250ms linear;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.image-wrap {
height: 100%;
width: 100%;
display: block;
}
.image-inner img {
width: 500px;
height: auto;
display: block;
}
<div class="image-wrap">
<img class="image-inner" src="http://i.stack.imgur.com/YyMHW.jpg" alt="" />
<div class="image information">
information<br/>
informa<br/>
info
</div>
</div>
This is possible using CSS3 transforms, but requires an extra element in your DOM:
<div class="image-wrap">
<img class="image-inner" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/08/korea5b.jpg" alt="" />
<div class="image information">
<div class="info-inner">
information
<br/>informa
<br/>info
</div>
</div>
</div>
Now with some absolute-positioning magic:
.image.information {
position:absolute;
left: 0;
top: 0;
bottom: 0;
width: 75px;
background: #ccc;
}
.info-inner {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-top:-75px;
margin-left: -75px;
height:55px;
width: 150px;
vertical-align: bottom;
transform: rotate(90deg);
}
.image-wrap {
height: 100%;
width: 100%;
position: relative;
}
img.image-inner {
width: 300px;
margin-left: 75px;
}
Note that there's no simple way to have vertically-centered text without specifying an explicit text height. In this case I have chosen 55px. It will stretch to match the height of any image you specify.
JSFiddle: http://jsfiddle.net/zephod/ckqcLsbv/2/
I have a Slider with a few images. Inside this slider, i have a div called "sb-bolas", and inside this div, i created new div's where i have a circle, and inside this circle i want to insert some text.
But i need to create more then 1 circle and i want to every circle have the same space between them.
How can i do this?
HTML
<div class="sb-bolas">
<div class="bolas-grad">something</div>
<div class="bolas-grad">something</div>
<div class="bolas-grad">something</div>
</div>
CSS
.sb-bolas {
padding: 10px;
bottom: 50px;
left: 100px;
right: 100px;
z-index: 1000;
position: absolute;
background: #CBBFAE;
background: rgba(190,176,155, 0.4);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #fff;
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
-o-transition: all 200ms;
-ms-transition: all 200ms;
transition: all 200ms;
}
.bolas-grad {
width: 100px;
height: 100px;
border-radius: 50px;
opacity: 0.7;
filter: alpha(opacity=40);
background: linear-gradient(to bottom, #007EFF, #09f);
font-size: 12px;
color: #fff;
line-height: 100px;
text-align: center;
}
*UPDATE**
Image
Use float:left; and margin
Keep in mind, using float will remove any absolute positioning you may have established with its parent element. To further help clarify what exactly you need to do, we don't have enough context with the rest of your HTML. Please provide more detailed code if you want a more detailed answer.
View Here: http://jsfiddle.net/SinisterSystems/qwA32/2/
HTML:
<div class="slideshow">
<div class="slide" style="background:#C00;">
</div>
<div class="slide" style="background:#0C0;">
</div>
<div class="slide" style="background:#00C;">
</div>
</div>
CSS:
.slideshow {
position:absolute;
top:0;
left:0;
}
div.slide {
float:left; // <------- Here
margin-right:50px; // <------- Here
width: 100px;
height: 100px;
border-radius:50px;
opacity:0.7;
filter:alpha(opacity=40);
background:linear-gradient(to bottom, #007EFF, #09f);
font-size:12px;
color:#fff;
line-height:100px;
text-align:center;
}
View Here: http://jsfiddle.net/SinisterSystems/qwA32/2/
Add property
display:inline-block;
to the class .bolas-grad to have the circles in the same row.
To have even spaces add margin to the class .bolas-grad
Consider following HTML.
I have .image and .details wrapped in .wrap. Outside the .wrap, I have another div .extra, which I want to hide initially but on hover over the image div only, i want to slide it down so that it takes whole area of the .wrap.
I am trying following code, does not work:
HTML:
<div class="box">
<div class="wrap">
<div class="image"><img src="http://farm9.staticflickr.com/8075/8310628243_d48e64dc66_m.jpg" /></div>
<div class="details">xxx</div>
</div>
<div class="extra">hidden, show on hover over .image</div>
</div>
CSS:
.box{
border: 1px solid red;
width: 240px;
}
.image{
border: 1px solid green;
position: relative;
}
.extra{
position: absolute;
top: -100%;
left: 0;
background: green;
}
.box .image:hover .extra{
top: 0;
}
Demo: http://jsfiddle.net/pv9jd/
.extra is not a child of .image.
I updated the fiddle by replacing .image with .wrap:hover.
http://jsfiddle.net/UrKCs/2/
I'm not sure if you want that, because now the .extra appears when hovering the whole .wrap div.
I updated it again to have the hover on the image only
http://jsfiddle.net/UrKCs/5/
I believe you are looking for something like this image hover using jQuery
$('.image').hover(function(){
$('.extra').css({'top' : '0'});
},function(){
$('.extra').css({'top' : '-100%'}
);
});
Sorry to butcher your code but this may be able to help you:
<div class="box">
<div class="image"></div>
</div>
This is the CSS:
.box div{
color: #fff;
width: 200px;
height: 100px;
position: relative;
box-sizing: border-box;
transition: border .7s ease;
}
.image{
background: #fff url(http://farm9.staticflickr.com/8075/8310628243_d48e64dc66_m.jpg) bottom;
border-top: solid 100px #ccc;
}
.image:hover{
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
border: solid 0px;
}
You can read more here for the sliding.
You can also play around here: http://codepen.io/joe/pen/oqxJu