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

[HudakHelli]

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

 

[soapboy]

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.

 

[bentesn1per]

tama tong si soapboy. . CSS lng yan girl. inspect element mo and you will see the magic in it.
ganito lng dinung idea nian: http://jsfiddle.net/MBLZx/

 

[vhanjan]

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

 

[PirateLuffy]

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

<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>

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;
}