hover effect when passing over an element

Question

hover effect when passing over an element

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have the sgte. problem, since my mouse is positioned on the element ultimositemns all the elements have the effect, it is obvious because they all have the same name in the class my question is what would be an alternative to not have several different names of classes and only change the element on which it is positioned

function foro_img() {

  $('.ultimositemns').on('mouseover', function() {
    $('.ultimositemns img').css("filter", "blur(2px)");
    $('.ultimositemns h5').css("font-size", "27px");
    $('.ultimositemns h5').css("background", "linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.19) 12%, rgba(0,0,0,0.51) 33%)");

    $('#vere').css("font-size", "100px");
  });
  $('.ultimositemns').on('mouseleave', function() {
    $('.ultimositemns img').css("filter", "blur(0px)");
    $('.ultimositemns h5').css("font-size", "0px");
    $('.ultimositemns h5').css("background", "transparent");
    $('#vere').css("font-size", "0");

  });



}

.ultimositemns {
  position: relative;
  text-align: center;
  overflow: hidden;
  float: left;
  width: auto;
  min-width: 300px;
  height: 300px;
  background: white;
  transition: .5s;
}

.botton-ver {
  position: absolute;
  z-index: 2;
  left: 35%;
  top: 30%;
}

.vere {
  width: 100%;
  height: auto;
  background: #039BE5;
  transition: .3s;
  font-size: 0px;
  border-radius: 100%;
  color: white;
}

.ultimositemns img {
  text-align: center;
  overflow: hidden;
  height: 300px;
  filter: blur(0px);
  transition: .8s;
}

.ultimositemns h5 {
  margin: 0;
  padding: 10px;
  width: 100%;
  position: absolute;
  background: none;
  z-index: 2;
  color: white;
  bottom: 0;
  background: none;
  font-size: 0px;
  transition: .3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ultimositemns">
  <div class="botton-ver">
    <i class="vere" class="large material-icons">reply</i>
  </div>
  <h5>Ricardo Arjona 2017</h5>
  <img src="assets/img/foro/artista/holo1.jpg">
</div>
<div class="ultimositemns">
  <div class="botton-ver">
    <i class="vere" class="large material-icons">reply</i>
  </div>
  <h5>Nicky Jam 2017</h5>
  <img src="assets/img/foro/artista/holo2.jpg">
</div>
<div class="ultimositemns">
  <div class="botton-ver">
    <i class="vere" class="large material-icons">reply</i>
  </div>
  <h5>Shakira 2017</h5>
  <img src="assets/img/foro/artista/red.jpg">
</div>
<div class="ultimositemns">
  <div class="botton-ver">
    <i class="vere" class="large material-icons">reply</i>
  </div>
  <h5>Shakira 2017</h5>
  <img src="assets/img/foro/artista/holo3.jpg">
</div>

javascript jquery css3

asked by Cesar 29.05.2017 в 21:54

source

2 answers

0

Use the following:

.ultimositemns {
  position: relative;
  text-align: center;
  overflow: hidden;
  float: left;
  width: auto;
  min-width: 300px;
  height: 300px;
  background: white;
  transition: .5s;
}

.ultimositemns :hover {
  background: red;
}

link

answered by 29.05.2017 в 22:00

Pass an instruction from sql to an asp: SqlDataSource My jquery cdn is not working in linux Mint

score 1 · Accepted Answer

Use the this object for example:

$(this).css('background-color', 'red');

this would go in the mouseover function and only apply the changes in the selected object.

 $('.ultimositemns').on('mouseover', function() {
    $(this).find('img').css("filter", "blur(2px)");
    $(this).find('h5').css("font-size", "27px");

    $('#vere').css("font-size", "100px");
  });