Symbianize Forum

Most of our features and services are available only to members, so we encourage you to login or register a new account. Registration is free, fast and simple. You only need to provide a valid email. Being a member you'll gain access to all member forums and features, post a message to ask question or provide answer, and share or find resources related to mobile phones, tablets, computers, game consoles, and multimedia.

All that and more, so what are you waiting for, click the register button and join us now! Ito ang website na ginawa ng pinoy para sa pinoy!

HELP ! patanong po kung panu gawin tong ganito. (web design)

HudakHelli

Amateur
Advanced Member
Messages
113
Reaction score
0
Points
26
patanong lang po kung pano ginagawa ung hover effects po sa mga items na pag hinohover ung mouse nawawala ung text tas lumilinaw ung image. tulad po nitong sa site na to. http://store.ppy.sh/store/listing sana me makapag turo :D
 
the tech. lies in the product-box class of http://store.ppy.sh/build/css/app-f094952f78.css, pag nilagay mo yung class na to sa tag mo, that effect happens, the css is minified, so better beautify it first. then search for product - box class to see how its implemented. based on my findings, CSS lang gumagawa nito.
 
Last edited:
sample lang

your html link is this

<a href="http://yourdomain.com" id="samplelink">your link</a>


on your css
dito hindi mo pa sya hinohover
#samplelink {
color: blue;
font-weight: 900;
}
output ay ito
your link


dito naman yung hinover mo na sya
#samplelink:hover {
color: yellow;
text-decoration: underline;
}
pag hinover mo sya ito naman output nya
your link
 
Last edited:
CSS3 opacity lang yan, here i made a working sample for you:

http://codepen.io/anon/pen/QEkggE?editors=1100

i didn't use RGBa just like what http://store.ppy.sh/store/listing did

simply because you can achieve the same effect by simply setting the background color of the container to black and the image opacity to ~50%

browser support for RGBa is no longer an issue kaya ok lng din kung gusto mo RGBa -- para mas mabilis mag-manipulate ng opacity ng colors

Code:
<div class="thumbnail">

  <img src="http://images.snoork.com/images/1284850818_testImage.jpg" alt="Some Alt" />

  <span class="caption">Dr. House</span>

</div>

<div class="thumbnail">

  <img src="http://images.snoork.com/images/1284850818_testImage.jpg" alt="Some Alt" />

  <span class="caption">Symbianize</span>

</div>

<div class="thumbnail">

  <img src="http://images.snoork.com/images/1284850818_testImage.jpg" alt="Some Alt" />

  <span class="caption">Sample Caption</span>

</div>

Code:
body {
  background: lightgrEy; /* not lightgrAy */
  font: normal 100%/150% "Arial", sans-serif;
}

.thumbnail {
  display: inline-block;
  position: relative; /* parent of .caption */
  background: black;
  margin: 1em;
}

.thumbnail img {
  display: block;
  opacity: .5;
  transition: .3s;
}

.caption {
  color: white;
  position: absolute; /* absolutely relative to .thumbnail */
  top: 1em;
  left: 1em;
  opacity: 1;
  transition: .3s;
}

.thumbnail:hover img {
  opacity: 1;
}

.thumbnail:hover .caption {
  opacity: 0;
}
 
Back
Top Bottom