Advertisement
Guest User

Untitled

a guest
May 27th, 2016
56
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.52 KB | None | 0 0
  1. <div class="cursos">
  2. <div>
  3. <h3>Cursos X</h3>
  4. <hr>
  5. <p> Total de Alunos : 32 </p>
  6. <p> Professor : Paulo Junqueira </p>
  7. <p> Data de Iniicio : 20/01/2016 </p>
  8. <p> Data de Encerramento : 12/11/2017 </p>
  9. </div>
  10. </div>
  11.  
  12. .cursos div{
  13. background-color: #00cc99;
  14. width:calc(46% - 4% - 16px);
  15. margin:2%;
  16. float: left;
  17. color:white;
  18. padding: 2%;
  19. border: 4px solid #ddd;
  20. text-shadow: #00cc99 1px 1px 12px;
  21. border-radius: 5px;
  22. position:relative;
  23. cursor:pointer;
  24. }
  25. .cursos p{
  26. font-family: "open sans";
  27. }
  28. .cursos hr{
  29. border: 1px solid #fff;
  30. }
  31. .cursos span{
  32. background-color: rgba(0,0,0,0.5);
  33. position:absolute;
  34. top:0;
  35. left:0;
  36. display:flex;
  37. align-items:center;
  38. justify-content: center;
  39. display:none;
  40. }
  41.  
  42. $(document).ready(function(){
  43. var div_h = $('.cursos div:eq(0)').innerHeight();
  44.  
  45. $('.cursos div').append('<span></i>EDITAR</span>');
  46. $('.cursos span').css('width',$('.cursos div').innerWidth());
  47. $('.cursos span').css('height',div_h);
  48. $('.cursos div').on('mouseenter',function(){
  49. $(this).find('span').slideDown();
  50. $(this).find('span').css({'display':'flex','align-items':'center','justify-content':'center'});
  51. $(this).on('mouseleave',function(){
  52. $(this).find('span').slideUp();
  53. });
  54. });
  55.  
  56. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement