Help - Search - Members - Calendar
Full Version: Simi Transparent hover
Forums > Resource Center > Support Center > MySpace Support > Myspace Resolved Topics
themusicworld2050
IN THE MAIN IMAGE THERE a car and when you get your mouse over it a simi transparent thingy comes out in the top of that image.

How can i apply this to other images in my profile ?

link of the picture with the simi transparent hover pic is located :

http://demo.designmyspace.org/big_picture_f1.php


CODE
<div class="topline"></div>
<div class="topline-middle">
<div class="tophead">

<a class="comment" href="http://yourcommentlinkgoeshere.com" title="Post a comment!"><span>Post a comment!</span></a>
<a class="friend" href="http://yourfriendlinkgoeshere.com" title="Add to friends"><span>Add to friends</span></a>

<div class="id1"><b>F1</b> Lewis Hamilton</div>
<a class="minipic" href="#"><img class="border" src="http://img.designmyspace.org/big_picture_f1/minipic.jpg" width="70px" height="70px" /></a>
<div class="id2">Lewis Hamilton</div>
<div class="id3">Vodafone McLaren Mercedes<br />24 years old, England</div>
<div class="id4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comdo consequat. Duis aute irure dolor in reprehenderit in voluptate.</div>

<a rel="nofollow" href="#" class="imgpart"><span>Lewis drives to victory in Hungary!</span>
<img src="http://img.designmyspace.org/big_picture_f1/default.jpg" width="922px" height="478px" />
</a>

<div class="sidelinks">
<ul>
<li><a href="http://twitter.com/thefifthdriver" class="active">Official McLaren Twitter</a></li>
<li><a href="http://mclaren.com/">Official McLaren Website</a></li>
<li><a href="http://lewishamilton.com">LewisHamilton.com</a></li>
</ul>
</div>

<a class="credit" href="http://designmyspace.org" title="Design by DesignMyspace.org"><span>Please, do not remove this line.</span></a></div>
</div>

<style>
NOTE {RESIZE COMMENT IMAGES}
td.text td.text table table table td a img {width:100px;}
td.text td.text table table table td div img {width:80px;}
td.text td.text table table td img {width:260px; max-width:260px !important; width:auto !important;}
td.text td.text table table td div img {width:80px !important;}
* html td.text td.text table table td img {width:80px !important;}
* html td.text td.text table table td a img {width:90px !important;}
* html td.text td.text table table td div img {width:80px !important;}
NOTE {RESIZE COMMENT FLASH VIDEOS}
table.friendsComments object {width:260px;height:218px;}
table.friendsComments embed {width:260px;height:218px;}
table.friendsComments a object {width:260px;height:218px;}
table.friendsComments a embed {width:260px;height:218px;}
</style>

<style>
NOTE {Edit these if you want}
.blacktext12:before {content: "OMG! ";}
.redbtext:after {content: " awesome";}

body {
margin-top: 890px;
font-size: 11px;
line-height: auto;
background-color:1c1c1c;
font-family: Arial, Verdana, Trebuchet MS, sans-serif;
background-repeat: repeat;
background-position: top center;
background-image: url(http://img.designmyspace.org/big_picture/bg_stretch_y.png);
}
body table {margin-top:30px;}

.topline {
width: 9999px;
height: 869px;
position: absolute;
top: 0;
right: 0;
background-color:transparent;
background-image: url(http://img.designmyspace.org/big_picture/bg_stretch_x.png);
background-positon: top center;
background-repeat: repeat-x;
overflow: hidden;
}
.topline-middle {
width: 1000px;
height: 175px;
position: absolute;
margin-left: -500px;
left: 50%;
top: 0;
background-color:transparent;
}
.tophead .friend {
position: absolute;
left: 919px;
top: 81px;
display: block;
width: 56px;
height: 41px;
background-image: url(http://img.designmyspace.org/big_picture_f1/btn_friend.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.tophead .friend:hover {background-position: 0 -41px;}
.tophead .friend span {display: none;}

.tophead .comment {
position: absolute;
left: 863px;
top: 81px;
display: block;
width: 56px;
height: 41px;
background-image: url(http://img.designmyspace.org/big_picture_f1/btn_comment.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.tophead .comment:hover {background-position: 0 -41px;}
.tophead .comment span {display: none;}

.tophead {
width: 1000px;
height: 869px;
position: absolute;
margin-left: -500px;
left: 50%;
top: 0px;
background-color:transparent;
background-image: url(http://img.designmyspace.org/big_picture_f1/bg.jpg);
background-repeat: no-repeat;
background-position: top;
}
.bottomhead {width: 1000px; height: 26px; position: absolute; margin-left: -500px; left: 50%; top: 600px; background-color:transparent; background-image: url();}
.tophead .imgpart span { display:none; }
.tophead .imgpart:hover { text-decoration:none; }
.tophead .imgpart:hover span { opacity:0.60; filter:alpha(opacity=60); -moz-opacity:0.60; background-color:000; background-image: url(http://img.designmyspace.org/big_picture/line_overlay.jpg); background-position: bottom; background-repeat: repeat-x; display:block; position:absolute; top:0px; left:0px; width:922px; padding:10px 20px; color:fff; font-size:20px; font-family: Georgia, Arial, Verdana, Trebuchet MS, sans-serif; line-height: 30px; font-style: italic; font-weight: normal!important; }
.tophead .imgpart:hover span strong {color: ffffff; margin: 0; padding: 0; line-height: 44px;}
.tophead .imgpart:hover span br {line-height: 5px; margin: 0; padding: 0;}
.tophead .imgpart {
width: 922px;
height: 478px;
position: absolute;
left: 45px;
top: 149px;
padding: 0;
overflow: hidden;
display: block;
}
.tophead .id1 {
width: 780px;
position: absolute;
left: 73px;
top: 69px;
height: 37px;
color:ffffff;
padding: 0px;
font-size: 26px;
font-family: Arial, Verdana, Trebuchet MS, sans-serif;
font-weight: normal;
letter-spacing: -1px;
overflow: hidden;
text-shadow: 1px 1px 1px black;
}
.tophead .id2 {
width: 175px;
position: absolute;
left: 148px;
top: 668px;
height: 25px;
color:ffffff;
padding: 0px;
font-size: 18px;
font-family: Arial, Verdana, Trebuchet MS, sans-serif;
font-weight: bold;
letter-spacing: -1px;
overflow: hidden;
text-shadow: 1px 1px 0 rgb(120,18,0);
}
.tophead .id3 {
width: 175px;
position: absolute;
left: 148px;
top: 691px;
height: 43px;
color:ffbdb1;
padding: 0px;
font-size: 12px;
font-family: Arial, Verdana, Trebuchet MS, sans-serif;
font-weight: normal;
overflow: hidden;
text-align: left;
line-height: 20px!important;
text-shadow: 1px 1px 0 rgb(120,18,0);
}
.tophead .id3 span.white { color:fff;}
.tophead .id4 {
width: 587px;
position: absolute;
left: 369px;
top: 668px;
height: 58px;
color:aeb2ba;
padding: 0px;
font-size: 12px;
font-family: Arial, Verdana, Trebuchet MS, sans-serif;
font-weight: normal;
overflow: hidden;
line-height: 20px!important;
text-shadow: 1px 1px 0 rgb(36,37,39)
}
.tophead .minipic {
width: 80px;
position: absolute;
left: 47px;
top: 659px;
height: 80px;
color:fff;
padding: 0px;
font-size: 30px;
font-family: Arial, Verdana, Trebuchet MS, sans-serif;
font-weight: bold;
letter-spacing: -1px;
overflow: hidden;
}
a img.border {border-style:solid; border-width:5px; border-color:8d1601; }
a:hover img.border, a img.border:hover {border-style:solid; border-width:5px; border-color:691000;}

.tophead .sidelinks {
position:absolute;
left:48px;
top:602px;
width: 915px;
height: 30px;
}
.tophead .sidelinks ul { margin:0px; padding:0px;}
.tophead .sidelinks ul li { margin:0px; list-style:none; float:right; margin-left:4px; font-size:12px; }
.tophead .sidelinks ul li a { text-decoration:none; color:fff; padding: 6px 8px; position:relative; font-weight: bold; opacity:0.70; filter:alpha(opacity=70); -moz-opacity:0.70; background-color:000; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.tophead .sidelinks ul li a:hover, .topline-middle .topnav ul li a.active {color:ffffff; text-decoration:none; opacity:0.80; filter:alpha(opacity=80); -moz-opacity:0.80; background-color:000;}
.tophead .sidelinks ul li a span {display:none;}
.tophead .sidelinks ul li a:hover span, .topline-middle .topnav ul li a.active span{ display:none;}

.tophead .credit { width: 106px; height: 14px; position: absolute; left: 877px; top: 6px; display: block; cursor: pointer; }
.tophead .credit span {display: none;}

p {margin: 0px 0px 1em 0px; font-family: font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-size: 12px;}
a, a:link, a:visited {color:ffffff; text-decoration: none; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a:hover {color:c0c6ce; text-decoration: underline}
img {border: none;}
br {line-height: 20px;}
form {border-width:0px;background-color:none;}
body>div {margin-left: 14px;}
table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}
table table table td {background-color:transparent;margin:0px;padding: 0 26px 15px 26px}
table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}
table table table table td {padding:0px;margin:0px;}
table table table {margin:0px; background-color:46494d; width: 100% !important; background-repeat: repeat-x; background-position: top center; background-image: url(http://img.designmyspace.org/big_picture/box_top.png); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: 27282a; border-top-width: 1px; border-top-style: solid; border-top-color: 27282a; -moz-border-radius: 7px; -webkit-border-radius: 7px;}
body td table, body div table {margin-top: 0;}
font {color:b5bcc6;font-size:10px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a font:hover {color:171818 text-shadow: 1px 1px 0 rgb(102,106,111) ;}
a.topline-middle .navbar:link, a.topline-middle .navbar:visited {color:ffffff text-decoration: none;}
a.topline-middle .navbar:hover {color:c0c6ce;}
table tr td table tr td font {display: inline;}
table tr td table a.topline-middle .navbar {font-size: 10px;}
.text {color:b5bcc6;font-size:12px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a.text:link, a.text:visited {color:ffffff}
a.text:hover {color:c0c6ce;}
.nametext {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ; font-size: 13px; margin: 14px 0px 4px 0px; padding: 0px 0px 14px 0px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: 595d61; width: 280px !important; vertical-align: bottom;}
.contactTable {width: 332px !important;}
.contactTable td {padding: 0px; margin: 0px; text-align: center;}
.contactTable span.whitetext12 {position: relative; left: 24px;}
.contactTable td table {background-color: transparent; background-image: url(http://img.designmyspace.org/big_picture_f1/msg_block.png); background-position: center; background-repeat: no-repeat;}
.contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 38px; width: 156px; background-color: transparent;}
.contactTable a img, .contactTable img {border: 0px; display: none; visibility: hidden;}
table tr td table tr td table tr td div strong {display: block; width: 280px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
.whitetext12 {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ; font-size: 13px; margin: 8px 0px 4px 0px; padding: 0 0 14px 0; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: 595d61; width: 280px;}
.blacktext12 {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ; font-size: 12px; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; display: block; margin-top: 14px; width: 100%;}
.contactTable span.whitetext12 {position: relative; left: 24px;}
.btext {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ; font-size: 13px; margin: 14px 0px 4px 0px; padding: 0 14px 14px 14px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: 595d61; width:370;}
.orangetext15 {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ; font-size: 13px; margin: 14px 0px 4px 0px; padding: 0 14px 14px 14px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: 595d61; width:370px;}
.lightbluetext8 {color:b5bcc6; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
.redtext,.redbtext {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-size: 12px; font-weight: bold;}
a.redlink:link {color:ffffff; padding-top: 3px; text-decoration: none;}

a.redlink:visited {color:ffffff}
a.redlink:hover {color:c0c6ce; text-decoration:underline;}
u {text-decoration: none; font-size: 10px;}
a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited { color:b5bcc6; text-decoration: none; }
a.searchlinkSmall:hover { color:ffffff; }
td, table, tr, span, li, p, div, textarea, DIV {
font-family: Arial, Verdana, Trebuchet MS, sans-serif;
color: b5bcc6;
}
h1, h2, h3, h4, h5, h6 {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ;}
.blacktext10 {color:171818 !important; font-size: 12px!important; font-family: Arial, Verdana, Trebuchet MS, sans-serif; text-shadow: 1px 1px 0 rgb(102,106,111) ;}
.searchlinksmall a{color:171818 !important; text-decoration: none!important; text-shadow: 1px 1px 0 rgb(102,106,111) ;}
.searchlinksmall a:hover{color:171818 !important; text-decoration: underline !important; text-shadow: 1px 1px 0 rgb(102,106,111) ;}
.userProfileURL {font-size: 9px!important; text-decoration: none!important; text-shadow: 1px 1px 0 rgb(102,106,111) ;}
</style>
Mickey
To accomplish that, position a DIV over your image containing what you want to appear when you hover across it. You will need to hide it first then make it show on hover. A basic setup would look like this:

CODE
div.image {position: relative: z-index: 8; height: 500px; width:500px;}
div.image div {display:none;}
div.image:hover div {position: absolute; top: 0; left: 0; z-index: 9; padding: 5px 0 5px 0; opacity: 0.60; filter: alpha(opacity=60); -moz-opacity: 0.60; display:block;}
div.image:hover div {width: 500px; background: black; text-align: center; font: normal 15pt Georgia; color: white;}

The first line positions the image and defines its size. The second line hides the hover content. The third line makes it show on hover as well as gives it a bit of transparency. The fourth line styles the content itself. You can edit any of the attributes on there to your liking. Then to put this in effect, you'd use a code that looks something like this:

CODE
<div class="image">
<img src="URL" alt="" />
<div>Insert your caption here.</div>
</div>

Replace URL with the url of your image, and then replace the text with what you want to show when the mouse hovers across the image.
fixtatik
Just to note...this likely won't work in IE on a 1.0 profile (it might in 2.0, never bothered trying).

The reason behind it is IE6 and earlier don't support :hover on any element but an anchor (<a>). IE7 added support for this, but only if a doctype is declared. Profile 1.0 doesn't declare a doctype, so it goes into quirks mode and all hell breaks loose. Profile 2.0 does have a doctype, but I don't remember if it works with transitional or if it's only in strict documents that it works. IE8 has better support, but Myspace had to be a bunch of a-holes and tell IE8 to function as IE7.

I swear, Myspace is as screwed up as Microsoft. It's a conspiracy.
Mickey
That's why people keep telling me the links on my 1.0 layout don't work. Ugh, MySpace sucks so much ass.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.