I have added an overlay of shadow on my images but I want the shadow to get darker when I hover the image. I tried a bunch of different things but I couldn't get it to work properly and it would shift the pictures all over the place when you would hover. This is what I have so far.
http://jsfiddle.net/Qf4Ka/6/
HTML
<section id="top-container" class="top-column" style="width:1050px; height:400px; ">
<div class="image" style="float:left;">
<img src="http://www.hdwallpapersinn.com/wp-content/uploads/2012/09/HD-Wallpaper-1920x1080.jpg" border="0"; width="263"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd;">
<h4 style="font-size:30px; top: 90px; ">Nature</h4>
</div>
<div class="image" style="float:left;">
<img src="http://www.hdwallpapersart.com/wp-content/uploads/2013/04/tiger_wallpapers_hd_Bengal_Tiger_hd_wallpaper1.jpg" border="0"; width="262"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; ">
<h4 style="font-size:30px; top: 90px;">Bengal Tiger</h4>
</div>
</section>
CSS
.image {
position: relative;
}
h4 {
position: absolute;
width: 100%;
color: #fff;
float: left;
position: absolute;
font-size: 40px;
font-family: "Oswald";
text-align: center;
max-height: auto;
z-index: 20;
text-shadow: 1px 1px 2px #000;
-moz-text-shadow: 1px 1px 2px #000;
-ms-text-shadow: 1px 1px 2px #000;
-o-text-shadow: 1px 1px 2px #000;
-webkit-text-shadow: 1px 1px 2px #000;
}
.image {
position: relative;
}
.image:before {
content: '';
box-shadow: 0 0 50px 4px #000 inset;
-moz-box-shadow: 0 0 50px 4px #000 inset;
-webkit-box-shadow: 0 0 50px 6px #000 inset;
float: left;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
cursor: pointer;
}
Add a transition to the :before pseudo element.
.image:before {
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition:all 1s;
}
Change the pseudo element's box-shadow on hover of the .image element.
.image:hover:before {
box-shadow:0 0 100px 30px #000 inset;
}
Here is the updated example.
Related
I had this code to create a double border off different widths, but i need it to only show on the left,top and right sides. This is fine with the border property but not possible with outline as it doesn't share the same border-left etc
border: double 4px black;
outline: solid 3px black;
any help would be great
Why not remove the outline and instead create a nested element inside of the element?
You can do like this:
Create nested elements in HTML:
<div class="big">
<div class="small">Some text Here.....</div>
</div>
Then apply CSS:
.big{
border: 5px solid green;
border-bottom: none;
}
.small{
border: 2px solid black;
border-bottom: none;
margin: 2px;
}
No need to use the outline.
You can use box-shadow instead of outline - see demo below:
div {
line-height: 20px;
border-color: black;
border-style: double;
border-width: 4px 4px 0 4px;
box-shadow: -3px 0 0 0 black, /* left */
3px 0 0 0 black, /* right */
3px -3px 0 0 black, /* top */
-3px -3px 0 0 black; /* top */
}
<div> </div>
Create nested elements with their own id's
<div id="outer-border">
<div id="inner-border"></div>
</div>
Then set the correct CSS properties for those elements, for example something like:
#outer-border{border-bottom: none}
#inner-border{border-bottom: none}
Here is an idea using gradient to create the second border.
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
padding:3px; /*control the distance between border*/
padding-bottom:0;
background:
linear-gradient(green,green) top /100% 4px,
linear-gradient(green,green) left /4px 100%,
linear-gradient(green,green) right/4px 100%;
background-repeat:no-repeat;
background-origin:content-box;
}
<div class="box">
</div>
Another idea using pseudo element:
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:3px;
left:3px;
right:3px;
bottom:0;
border: solid 4px green;
border-bottom:none;
}
<div class="box">
</div>
.st1, .st2 {
background-color: yellow;
}
.st1 {
outline: solid 3px black;
width: 400px;
height: 200px;
position: relative;
}
.st2 {
border-left-color: black;
border-left-style: double;
border-left-width: 4px;
border-top-color: black;
border-top-style: double;
border-top-width: 4px;
border-right-color: black;
border-right-style: double;
border-right-width: 4px;
position: absolute;
left: -1px;
right: -1px;
top: -1px;
bottom: -3px;
}
<div class="st1"><div class="st2"></div></div>
or
.st1, .st2 {
background-color: yellow;
}
.st1 {
border: 3px solid black;
border-bottom: none;
width: 400px;
height: 200px;
position: relative;
box-sizing: border-box;
}
.st2 {
border: 1px solid black;
border-bottom: none;
margin-top: 2px;
margin-right: 2px;
margin-left: 2px;
margin-bottom: 0px;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
<div class="st1"><div class="st2">test</div></div>
Is it possible to add an even shadow to a div that is not a regular rectangle? Adding box-shadow doesn't work the way it works with a normal div. This is the div I'm talking about:
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
yes you can. Here is the example:
.circle {
width:150px;
height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
<div class="circle">
</div>
This question already has answers here:
transparent shape with arrow in upper corner
(2 answers)
Closed 7 years ago.
I have this custom shape made with css. I need to give a border to it but I have unsuccessful so far. How can I give it a border?
.comment-input-container {
width: 96%;
float: left;
}
input[type='text'] {
border: 0px !important;
box-shadow: none;
background-color: #f2f2f2;
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1);
padding: 5px;
}
.arrow-left {
float: left;
width: 0;
height: 0;
border-bottom: 10px solid #fff;
border-right: 10px solid #f2f2f2;
}
<div style="width: 300px;">
<div class="arrow-left">
</div>
<div class="comment-input-container">
<input type="text" placeholder="Reply to comment..." />
</div>
</div>
Also, another problem is that the arrow and input break for smaller devices, that is, the input gets stacked underneath the arrow. Is there a better way of creating this shape that is also responsive and stays intact?
Thanks to Harry, I was able to work out a laregely responsive solution:
.comment-input-container {
position: relative;
width: 100%;
border-left: none;
/* not required as the shape needs to be transparent */
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.comment-input-container:before {
position: absolute;
content: '';
top: 0px;
left: -7px;
height: 26%;
width: 10%;
background-color: #f6f7fb;
border-top: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
-webkit-transform-origin: bottom right;
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
}
.comment-input-container:after {
position: absolute;
content: '';
left: -7px;
height: 74%;
width: 5%;
max-width: 15px;
bottom: 0px;
border-left: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
background-color: #f6f7fb;
}
input[type="text"] {
border: 1px solid #e6e6e6;
border-left: none;
box-shadow: none;
background-color: #f6f7fb;
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1) !important;
margin: 0px;
padding: 10px;
outline: none;
}
input[type="text"]:focus {
border: 1px solid #e6e6e6;
border-left: none;
box-shadow: none;
background-color: #f6f7fb !important;
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1) !important;
padding: 10px;
outline: none;
}
.comment-box {
margin-left: 50px;
height: 50px;
}
<div class="comment-box">
<div class="comment-input-container">
<input type="text" placeholder="Reply to comment..." />
</div>
</div>
I assume the special shape is the last one? It's 0px x 0px, but you should see something since you gave it a 10px border. Unfortunately, The border is white so it blended in with the white background. I made the shape 1px x 1px and the background black so you can see the shape better.
body { background: black; }
.comment-input-container {
width: 96%;
float: left;
}
input[type='text'] {
border: 0px !important;
box-shadow: none;
background-color: #f2f2f2;
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1);
padding: 5px;
}
.arrow-left {
float: left;
width: 1px;
height: 0px;
border-bottom: 10px solid rgba(0, 0, 0, 0.0);
border-right: 10px solid #f2f2f2;
box-shadow: inset 4px 2px 22px 6px rgba(0,0,0,0.57);
outline: 2px inset rgba(0, 0, 0, .35;
}
<div style="width: 300px;">
<div class="arrow-left">
</div>
<div class="comment-input-container">
<input type="text" placeholder="Reply to comment..." />
</div>
</div>
I have one question with inverted triagle image overlay. I have created this DEMO from codepen.io.
What i want in my demo you can see there is a bubble div inside an image. a triangle on the right side of the image looks.I would like it to appear in the triangle in the picture. How can i do this anyone can help me ?
CSS:
.bubble
{
position: fixed;
width: 345px;
height: 235px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: #d8dbdf solid 1px;
-webkit-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
-moz-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent #fff;
display: block;
width: 0;
z-index: 1;
right: -10px;
top: 16px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent #d8dbdf;
display: block;
width: 0;
z-index: 0;
right: -11px;
top: 16px;
}
.film_bilgileri{
float:left;
width:345px;
height:235px;
background-color:red;
}
.film_kapak{
float:left;
width:345px;
height:120px;
background-color:white;
overflow:hidden;
}
.film_kapak img {
width:100%;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-webkit-backface-visibility: hidden;
}
HTML:
<div class="container">
<div class="bubble">
<div class="film_bilgileri">
<div class="film_kapak">
<img src="abc.jpg">
</div>
</div>
</div>
</div>
One way is to create a transparent triangle using white borders, and masking above and below using an element with white background.
transparent triangle using white masking is created by:
border-left: 11px solid transparent;
border-top: 11px solid white;
border-bottom: 11px solid white;
working example: http://jsfiddle.net/064ojpm8/
(note - it's not production material, but merely to give you the idea)
If you want your triangle point towards your image, you can use the code from Sgoldy in your :after pseudo-element:
.bubble:after {
content: '';
position: absolute;
width: 0;
border-right: 11px solid white;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
z-index: 1;
right: 0px;
top: 36px;
}
I just moved the element to the left with right: 0px; and altered the border values.
You don't need the :before
DEMO
I'm working on an image grid and want to create an effect similar to this http://instagram.com/instagram/ (the images in the squares on the lower part of the page where the border expands. This is what I have so far:
HTML:
<div id="page-title"> </div>
<div id="wrapper" style="min-height:300px;">
<!--start: Container -->
<div class="container" style="margin-left:100px;">
<div style="position: absolute; width:200px; border: 1px solid black; height:200px;">
<div style="position: relative; background:url('/testimages/1354189822.jpg')" class="polaroids">
</div>
</div>
</div>
</div>
</div>
CSS:
.polaroids {
background: #fff;
float: left;
width: 158px;
height:158px;
padding: 5px 5px 5px;
text-align: center;
text-decoration: none;
color: #333;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-webkit-transition: all .2s ease-in-out;
border: 4px solid white;
background-color: black;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin:0 auto !important;
}
.polaroids:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
z-index: 5; border-top: 10px solid white;
border-bottom: 10px solid white;
border-left: 8px solid white;
border-right: 8px solid white;
}
The middle div does not seem to want to centre. Where am I going wrong? http://jsfiddle.net/b5XDK/
for horizontal center use margin:0 auto; on the child element and remove the float:left;
http://jsfiddle.net/roine/b5XDK/10/
remove this
.polaroids { float:left }
remove your float:left of .polaroids