Hover – Using CSS vs JS

Responsive Hover Effects Generated by CSS, Not JS (scroll down)


.row-container {
}
.row-element {
float: left !important;
border: 1px solid #ff0000;
}
.row-clear {
clear: both;
}

.hover-text {
    opacity: 0;
    display: table-cell;
    background: #fdfeff;;
    font-size: 38px;
    line-height: 48px;
    color: #231F20;
    padding: 0 9%;
    margin: 10px;
    height: 92%;
    vertical-align: middle;
    text-align: center;
    overflow: hidden
}

.hover-text:hover {
    opacity: .85;
}


You are hovering over box 1.

You are hovering over box 2.

You are hovering over box 3.

You are hovering over box 4.

You are hovering over box 5.

You are hovering over box 6.

You are hovering over box 7.

You are hovering over box 8.