Pop-up en imágenes mediante CSS

Cool CSS Image Pop-up, otra técnica sencilla para lograr el efecto Pop-up en imágenes. Seguramente recordaran el post donde explicamos una. La idea es muy sencilla, dar el efecto Pop-up que habitualmente podemos llegar a ver mediante Javascript pero utilizando únicamente css. Utilizaremos una imagen miniatura y al pasar el Mouse sobre ella (mouse over), hará detonar el efecto Pop-up (imagen ampliada)
Podrán ver un demo aquí.

CSS:

 

1. #pic {

2. background-color: #FFFFFF;

3. left: 10px;

4. position: relative;

5. top: 10px;

6. width: 135px;

7. }

9. #pic a .large {

10. border: 0px;

11. display: block;

12. height: 1px;

13. left: -1px;

14. position: absolute;

15. top: -1px;

16. width: 1px;

17. }

19. #pic a img {

20. border: 0;

21. }

23. #pic a.p1, #pic a.p1:visited {

24. background: #FFFFFF;

25. border: 1px solid #000000;

26. display: block;

27. height: 90px;

28. left: 0;

29. text-decoration: none;

30. top: 0;

31. width: 135px;

32. }

34. #pic a.p1:hover {

35. background-color: #8C97A3;

36. color: #000000;

37. text-decoration: none;

38. }

40. #pic a.p1:hover .large {

41. border: 1px solid #000000;

42. display: block;

43. height: 233px;

44. left: 150px;

45. position: absolute;

46. top: -60px;

47. width: 300px;

48. }

HTML:

 

1. <p id=“pic”>

2. <a class=“p1″ href=“#” title=“miniatura”>

3. <img src=“imagen/miniatura.jpg” title=“miniatura”>

4. <img src=“imagen/grande.jpg” class=“large”></a>

5. </p>

 

Via: Xyberneticos