CSS
Shows 2 lines of text then expands. You may need to update height and max height properties to reflect current p text height size.
.summary-excerpt p {
overflow: hidden;
max-height: 37px; // set height to display 2 lines only
text-overflow: ellipsis;
transition: all ease 1000ms;
}
.summary-item:hover {
height: 600px!important; // Set height the whole container needs to be at end
z-index: 99999;
transition: all ease 1000ms;
p {
color: rgba(0,0,0,0.9);
max-height: 150px;
transition: all ease 1000ms;
}
}
CSS 2
Cuts off the line of text at 1 line and adds in ellipsis (...) until hovered over, then displays all of the text.
.summary-excerpt p {
overflow: hidden;
max-height: 37px; // set height to display 2 lines only
text-overflow: ellipsis;
transition: all ease 1000ms;
white-space: nowrap;
}
.summary-item:hover {
height: 600px!important; // Set height the whole container needs to be at end
z-index: 99999;
transition: all ease 1000ms;
p {
color: rgba(0,0,0,0.9);
max-height: 150px;
white-space: normal;
transition: all ease 1000ms;
}
}