I'm almost afraid to ask this question because it seems like such an obvious one, but I just can't find a clear answer, so at the risk of tarnishing my non-existant reputation, here goes:
Is there a way to add an expanding CSS inner-border to an image on hover, without affecting the size of the image?
Here is my code as close as I can get on my own:
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.media_item_container img {
border: 3px solid #00205f;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
.media_item_container img:hover {
border: 10px solid #00205f;
}
.media_item_container a
{
font-weight:bold;
color:#000;
text-decoration:none;
font-size:13px;
}
.media_item_container a:hover
{
color:#fff;
}
HTML
<body bgcolor="#999999">
<div class="media_item_container">
<div class="media_item_text">
<a href="#"><img src="http://lorempixel.com/output/business-q-c-158-158-5.jpg" width="158" height="158" class="media_item_thumb" />
<h3>E-Brochure: <em>Printable e-brochure</em></h3>
DOWNLOAD »</a>
</div>
</div>
</body>
http://jsfiddle.net/aKedV/
Just trying to determine if there is any way to do it without the image scaling down as the border size increases (I basically understand why this is happening, just can't seem to come up with a solution on my own).
And I should clarify when I ask if there is a way to do this, I assume there must be some way to do this, but I would love to know if there is a relatively easy way.
Thanks so much!
You can use outline instead of border.
outline:3px solid red;
outline-offset:-3px; //keeping it inside
and on hover
outline:10px solid red;
outline-offset:-10px;
Fiddle
Mate this is the solution that I came up with. Had to Change some HTML and CSS up but this is my shot at it. Hope this helps mate, Cheers
http://jsfiddle.net/aKedV/3/
HTML:
<body bgcolor="#999999">
<div class="media_item_container">
<div class="media_item_text">
<a href="#">
<div class="border" style="background: url(http://lorempixel.com/output/business-q-c-158-158-5.jpg);">
</div>
<h3>E-Brochure: <em>Printable e-brochure</em></h3>
DOWNLOAD »</a>
</div>
</div>
CSS:
.border {
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-ms-transition: all 500ms linear;
-kthtml-transition: all 500ms linear;
transition: all 500ms linear;
width: 158px;
height: 158px;
}
.border:hover {
-webkit-box-shadow: inset 0px 0px 2px 10px #00205f;
box-shadow: inset 0px 0px 2px 10px #00205f;
}
.media_item_container a
{
font-weight:bold;
color:#000;
text-decoration:none;
font-size:13px;
}
.media_item_container a:hover
{
color:#fff;
}
Related
.pic{
position: relative;
}
.pic .texthover{
position: absolute;
bottom:3%;
display: none;
z-index: 8000;
margin: 0 0 3.2px 0;
width: 100%;
text-align: left;
padding: 5px;
background: rgba(213,12,16,1.00);
border-bottom: 1px solid white;
transition: all 2s ease;
}
.pic:hover .texthover{
display: block;
}
<ul class="list-images">
<li>
<a href="#">
<div class="pic">
<img src="1 escultura.fw.png" width="278" height="175" title="Esculturas del Prado" class="image"/>
<div class="hover" style="">
<p class="texthover"> Escultura neoclasicista hasta el XVII</p>
</div> <!--END DIV HOVER-->
</div> <!--END DIV PIC-->
</li>
I've been racking my brain over this, it must be a very simple detail that escapes my comprehension, can anybody point it out??? Thanks all. I put the transition property in the original element and still not working...
A Vanila Example of Transition and how it works. You can change as per requirements.
div.list-images a:hover {
transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear; /* Firefox 4 */
-webkit-transition: background-color 0.5s linear; /* Safari and Chrome */
-o-transition: background-color 0.5s linear; /* Opera */
-ms-transition: background-color 0.5s linear; /* Explorer 10 */
background:#ff0000;
}
<div class="list-images">transition</div>
Well, this is my first topic here, so here it is!
I've just done a nice-simple :hover code where you can mouse over an image and the captions underneath it appears for complete. More specifically, in this code I have two types of captions, one above the image and one right underneath the image, which can be found when you mouse it over.
The :hover works pretty fine, however I need to add a simple effect, just a little linear transition. So I add the most basic transitions in the "a" tag, but it is not working at all! I guess the code is not recognizing the top:0px in the .featured-banner a class and the bottom:0px in the .featured-banner a:hover.
Does anyone have a solution for it? I appreciate you guys for helping me out!
Oh, just in case, the text inside the captions classes are written in portuguese but not very interesting, just an ad for Cancun! =P
Here is the HTML i'm using:
<div class="featured-banner">
<a href="#">
<div class="caption">
<p>Mega Oferta • Cancún • Carnaval 2014</p>
</div>
<img src="http://www.advtour.com.br/sample-cancun.jpg" />
<div class="under-caption">A partir de US$ 2.148 Ou entrada + 11x de R$ 358</div>
</a>
And here is the CSS:
.featured-banner {
width:930px;
height:350px;
background:#000;
font-family:sans-serif;
font-size:23px;
margin:14px 0px;
overflow:hidden;
position:relative;
}
.featured-banner a {
text-decoration:none;
position:absolute;
top:0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.featured-banner a:hover {
top:inherit;
bottom:0;
}
.caption {
width:100%;
height:350px;
color:#FFF;
text-transform:uppercase;
position:absolute;
top:0px;
z-index:98;
}
.caption p {
width:97%;
background:rgba(0,0,0, .4);
color:#FFF;
text-align:justify;
text-transform:uppercase;
background:rgba(0,0,0, .4);
padding:11px 14px;
position:absolute;
bottom:0px;
z-index:98;
}
.under-caption {
width:97%;
background:rgba(0,0,0, .4);
color:#FFF;
font-size:20px;
text-align:justify;
background:rgba(0,0,0, .4);
padding:11px 14px;
z-index:98;
}
Here is a demo
If you are going to transition the effect then you need to transition the same style. Going from top - bottom will cause no transition since it is changing the styles. If you did top: 0; to top: 100%; then you will see a transition.
Here is the css I changed:
.featured-banner a {
text-decoration:none;
position:absolute;
top:0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.featured-banner a:hover {
top:inherit;
top: -55px;
}
Finally, a fiddle: Demo
You can only transition the same attribute. Top and bottom aren't the same.
I worked out a fiddle, which shows how it could work.
.under-caption {
position: absolute;
width:97%;
background:rgba(0,0,0, .4);
color:#FFF;
font-size:20px;
text-align:justify;
background:rgba(0,0,0, .4);
padding:11px 14px;
z-index:98;
bottom: -3em;
-webkit-transition:bottom 1s ease;
-moz-transition:bottom 1s ease;
-ms-transition:bottom 1s ease;
-o-transition:bottom 1s ease;
transition:bottom 1s ease;
}
.featured-banner:hover .under-caption{
bottom: 1em;
}
http://jsfiddle.net/u3E5P/1/
I'm trying to make a original tumblr blog theme. This is my first time writing one from scratch, although CSS is not new to me. Z-indexes, however...
In short, on each post, a menu (like, reblog etc buttons...) becomes visible when the cursor hovers over a post. Apologies if my code looks messy.
header is the highest element on the entire page. Everything within h2 is the button menu, so it should be under header at all times.
#top header{
font-family:"Open Sans Condensed", sans-serif;
font-size:3.5em;
padding:0px;
margin-top:-8px;
height:72px;
text-transform:uppercase;
color:#fff;
background-color:{color:Base};
width:100%;
text-align:center;
-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .6);
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .6);
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
transition: all 3s ease-in-out;
}
#post h2 {
float:left;
width:auto;
margin:5px 4px -130px -10px;
opacity:0.0;
position:relative;
z-index:2;
padding-left:5px;
font-family:"Calibri", sans-serif;
text-decoration:none;
-webkit-transition: all .6s ;
-moz-transition: all .6s ;
-ms-transition: all .6s ;
-o-transition: all .6s ;
transition: all .6s ;
}
#post h2 a{
color: #fff;
font-family:calibri;
}
#post h2 .item{
width:20px;
color:#fff;
background-color:#5C5C5C;
margin-bottom: 4px;
padding:3px;
-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .6);
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .6);
-webkit-border-radius: 4px;
border-radius: 4px;
text-align:center;
-webkit-transition: all .6s ;
-moz-transition: all .6s ;
-ms-transition: all .6s ;
-o-transition: all .6s ;
transition: all .6s ;
}
#post h2 .item:hover{
background-color:{color:Post Accent};
-webkit-transition: all .6s ;
-moz-transition: all .6s ;
-ms-transition: all .6s ;
-o-transition: all .6s ;
transition: all .6s ;
}
#post h2 {
color:#ccc;
margin-left:0px;
opacity:1.0;
z-index:2!important;
-webkit-transition: all .6s ;
-moz-transition: all .6s ;
-ms-transition: all .6s ;
-o-transition: all .6s ;
transition: all .6s ;
}
I appreciate any help! Also feel free to give me any tips related to what you see above.
Thanks!
Edit:
HTML Markup for an example photoset post:
<div id="bin">
<div id="post">
<h2> <!-- permalink !-->
<div class="item" style="max-width:auto; width:auto;">{NoteCount} ♫</div>
<div class="item" style="padding-top:5px; padding-bottom:0px;">{LikeButton}</div>
<div class="item">{ReblogButton}</div>
<div class="item">∞</div>
</h2>
<div id="photoset">
<div class="photoset">
{Photoset}
</div>
</div>
{block:Caption}
{Caption}
{/block:Caption}
<div id="date">
{TimeAgo}
</div>
</div>
</div>
LIVE PREVIEW
http://pianotheme.tumblr.com/
Apply position:relative; to the #top header element with a z-index:999;.
Also, you want to make sure you don't have multiple DOM elements with the same id value. They should be unique within the DOM...otherwise, you can get some strange behavior.
If the issue is just that the buttons and things overlap the top header when you scroll, simply put a high z-index on the #top element. E.g.
#top {
z-index: 1000;
}
You have not got a closing } on your top CSS declaration
You do not have any z-index declared in your header CSS. You should set z-index this and ensure it has a higher value to what is currently set to your h2. To ensure that it is always on top you could give it a value of 1000, for testing purposes.
z-index works only on non static elements. You do have position: relative and z-index: 2 on h2 but it won't work as nothing else has non-static positioning. What effect are you expecting from h2? above which element do you want it to be?
Also, bu default absolute / relative / static will always stay above static element at same level.
I am trying to tint images onHover. I have the css working but some of the images which have rounded edges or don't completely fill the parent show the black background:
(The far left has the mouse over it)
How can hide the black so only the img is tinted?
Here is my css:
.thumb {
width:150px;
height:150px;
margin: 0px 5px 14px 14px;
float:left;
display:inline;
background: black;
overflow:hidden;
cursor: pointer;
/*border: 2px solid #00A3C6; */
}
.thumb img {
display: block;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.thumb:hover img {
opacity: 0.7;
}
If the image has rounded corners, you can use border-radius in your css to set rounded corners of the "tint" container.
If the actual image has a white border... you're kind of out of luck. You can crop images but you don't have any way to doing this dynamically for any kind of image.
How can hide the black so only the img is tinted?
Try removing background: black from .thumb ?
P.S. display: inline is also not needed there
I am working on a page which comprises of the divs floated on same direction with each having specified width so as to create a grid. I was trying the -webkit scale effect in order to have a zooming effect on the any hovered div along with other divs having their opacity reduced.
The problem arises when among the divs stacked together, when the div that comes first in order is hovered, it is partially overlapped the its successor div(having reduced opacity) due to zooming
here's an example code
html
<div id="div1" class="tile">Content 1</div>
<div id="div2" class="tile">Content 2</div>
<div id="div3" class="tile">Content 3</div>
css
.tile{
width:100px;
margin:6px;
float:left;
height:100px;
margin-right:0px;
margin-bottom:0px;
-webkit-transition: all .1s ease-in-out .1s;
-moz-transition: all .1s ease-in-out .1s;
}
.tile:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-moz-box-shadow: 0 0 3px 1px #fff;
-webkit-box-shadow: 0 0 3px 1px #fff;
box-shadow: 0 0 3px 1px #333;
}
and jquery
function tile_mouseover()
{
$(this).siblings('.tile').stop(true,true).animate({'opacity':'0.5'},300);
$(this).stop(true,true).animate({opacity:1},200)
}
On implementing the above the code,
when div1 is hovered, its scaled, and is overlapped by div2.
Any possible solutions?
I think this should work.
.tile {
position: relative;
}
.tile:hover{
z-index:2;
}
you're declaring a margin twice on your .tile class, fix it like this:
.tile{
width:100px;
margin:6px;
float:left;
height:100px;
-webkit-transition: all .1s ease-in-out .1s;
-moz-transition: all .1s ease-in-out .1s;
}