Question about a CSS about click:hover with text?-CodePudding

I need to create a "record store". I'm very new to CSS and HTML and hardly know anything in JAVA. This is what I need to create.

When the user hovers over one of these featured records, move that record vertically lower and make it become larger. Also, display information about that record that was not previously visible.

Any help is helpful.

CodePudding user response：

Use :hover.

Regarding the information you want to display, you could put them in another div with display: none and change it to display: block on hover using something like #record:hover #content {}.

<div id="record"></div>

#record {
  width: 100px;
  height: 100px;
  background: grey;
}

#record:hover {
  position: relative;
  top: 10px;
  width: 110px;
  height: 110px;
}

https://jsfiddle.net/y5j8rhfL/1/

CodePudding user response：

Try this instead

<div class = "record" ></div>

Now the HTML is ready

.record{
/* Whatever style you've applied here is fine */
transition-duration: .5s;
}
.record:hover{
transform: translateY(15px) scale(1.5);
}

The translateY(15px) is to move it down by 15px While the scale(1.5) is to make it appear bigger