CSS Image Effects

by

For starters: 

div > img {
  position: absolute;
}
div > p {
  position: relative;
  top: 50%;
  visibility: hidden;
  transition:all 0.3s ease-in;
  opacity:0;
}
div > img:hover {
  filter: blur(2px);
}
div > img:hover + p {
  visibility: visible;
  opacity:1;
}
<div>
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRVfOu73XA2Ebqxqa5pKzp_90m6aSIx1EcNu9s3axKCn_YfqDGcnA" />
  <p>Some text</p>
</div>

P.S: Really, you need to surf this thing called GOOGLE, its awesome!!! <3

More Related Contents:

  1. Center multiple images horizontally in CSS
  2. img src SVG changing the styles with CSS
  3. Remove white space below image [duplicate]
  4. SVG data image not working as a background-image in a pseudo element
  5. CSS Image size, how to fill, but not stretch?
  6. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  7. How to vertically align an image inside a div
  8. Is there any way to hover over one element and affect a different element? [duplicate]
  9. Preloading CSS Images
  10. How can I resize an image dynamically with CSS as the browser width/height changes?
  11. Adjust list style image position?
  12. Drop shadow for PNG image in CSS
  13. Text on image mouseover?
  14. html, css – weird invisible margin below pictures
  15. Greyscale Background Css Images
  16. Replacing H1 text with a logo image: best method for SEO and accessibility?
  17. How to put an image in div with CSS?
  18. CSS: 100% width or height while keeping aspect ratio?
  19. Responsive Images with CSS
  20. Cross browser way to rotate image using CSS?
  21. Replace input type=file by an image
  22. Removing the image border in Chrome/IE9
  23. Define an ‘s src attribute in CSS [duplicate]
  24. Contain an image within a div?
  25. vertical-align image in div [duplicate]
  26. How to vertically align an image inside a div
  27. How to use images in css with Webpack
  28. input type=”image” shows unwanted border in Chrome and broken link in IE7
  29. Print styles: How to ensure image doesn’t span a page break
  30. Inner border over images with CSS?

Leave a Comment