Guest Access
Tutorial Wizardmaster
Tutorial Wizardmaster
Tutorial Wizardmaster
profile
calvin624
profile
Hey everyone,
Was hoping someone here would help me out with a little CSS edit.
I basically have (75 x 75) images that I want to add one of three small (16 x 16) corner overlays to.
The icon would be at the top right hand corner of the bigger image.
Thanks in advance
Was hoping someone here would help me out with a little CSS edit.
I basically have (75 x 75) images that I want to add one of three small (16 x 16) corner overlays to.
The icon would be at the top right hand corner of the bigger image.
Thanks in advance
Tutorial Wizardmaster
Show Signature
Administrator
Administrator
Administrator
profile
G@MeF@Ce
profile
yo C264 - for small icon over large icon you can try:
html:
css:
for the over lay icon:
and for the hover effect:
let me know if that works out for you
^,^
html:
- Code:
<div class="~your_images~">
<a href="~url_link~"><img src="~image1_name~" alt="~image_name_if_missing~" width="147" height="148" border="0" title="~hover_title~" />
<span>~whatevers~</span></a>
</div>
css:
- Code:
.your_images {
position: relative;
width: 147px;
height: 148px;
}
for the over lay icon:
- Code:
.your_images span {
position: absolute;
top: 0px;
left: 0px;
width: 147px;
height: 148px;
background-image:url(../images/img.png);
background-repeat:no-repeat;
}
and for the hover effect:
- Code:
.your_images span:hover {
background-image:url(../images/img.png);
}
let me know if that works out for you
^,^
Administrator
Show Signature
Tutorial Wizardmaster
Tutorial Wizardmaster
Tutorial Wizardmaster
profile
calvin624
profile
Thanks for the help man, that's a nice technique I've used in the past but as far as I can tell it's not what I'm after, here are some images that might clear it up.
First image:
Second image:
Finished product:
First image:
Second image:
Finished product:
Tutorial Wizardmaster
Show Signature
Administrator
Administrator
Administrator
profile
G@MeF@Ce
profile
oic ~ try this...
html:
css:
(ooh I like the little medal graphic +)
html:
- Code:
<div id="img_box">
<img src="1st_img.jpg" id="1st_img" />
<img src="2nd_img.jpg" id="2nd_img" />
</div>
css:
- Code:
#img_box {
position:relative;
}
#2nd_img {
position: absolute;
right: 10px;
top: 10px;
}
(ooh I like the little medal graphic +)
Administrator
Show Signature
Tutorial Wizardmaster
Tutorial Wizardmaster
Tutorial Wizardmaster
profile
calvin624
profile
Didn't work :/
This is as far as I've got:
CSS
HTML
Result:
This is as far as I've got:
CSS
- Code:
div.square {
position:absolute;
height:75px;
width:75px;
z-index:0;
}
div.medal {
position:relative;
left:59px;
height:16px;
width:16px;
z-index:1;
}
HTML
- Code:
<div class="square"><img src="http://xasabs.files.wordpress.com/2011/09/environment.png"></div>
<div class="medal"><img src="http://i49.servimg.com/u/f49/14/79/93/79/4_130410.png"></div>
Result:
Tutorial Wizardmaster
Show Signature
ACTIVATED
ACTIVATED
ACTIVATED
profile
Thunder
profile
To the divisory line you can write
at html.
edit:
"< h r / >
at html.
edit:
"< h r / >
ACTIVATED
Show Signature
ACTIVATED
Tutorial Wizardmaster
Tutorial Wizardmaster
Tutorial Wizardmaster
profile
calvin624
profile
It's part of the wordpress framework, I'm guessing the div entries have confused it - thanks though man.
Well I know z-index is definitely used to put one image in front of another. The medal has to be 'relative' to the 75x75 square so that it ends up in the top right hand corner every time.
Just missing something and I dunno what, how frustrating haha.
Well I know z-index is definitely used to put one image in front of another. The medal has to be 'relative' to the 75x75 square so that it ends up in the top right hand corner every time.
Just missing something and I dunno what, how frustrating haha.
Tutorial Wizardmaster
Show Signature
Administrator
Administrator
Administrator
profile
G@MeF@Ce
profile
if you want to manually do it via html try:
(for the background image)
and then below that code
(for the small icon)
^added in the hover opacity effect.
just edit the absolute positioning to line the graphics right.
! of course this method is page specific.
for CSS have you tried without the "div" , pixel specific both absolute?
(for the background image)
- Code:
<!--for the background image-->
<a href="http://LINK" TITLE="hover_caption" TARGET="blank" style="position:absolute; top:0px; right:0px;"><img src="http://image1.png"></a>
and then below that code
(for the small icon)
- Code:
<!--for the small icon-->
<a href="http://LINK" TITLE="hover_caption" style="position:absolute; top:10px; right:10px;"><img src="image2.png" style="opacity:0.7;filter:alpha(opacity=70)" filter:alpha(opacity=70); -moz-opacity: 0.7;
opacity:0.7;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" border="0" ></a>
^added in the hover opacity effect.
just edit the absolute positioning to line the graphics right.
! of course this method is page specific.
for CSS have you tried without the "div" , pixel specific both absolute?
- Code:
.square {
position:absolute;
height:75px;
width:75px;
z-index:0;
}
.medal {
position:absolute;
top: 0px;
right: 10px;
height:16px;
width:16px;
z-index:1;
}
Administrator
Show Signature