Customize excerpt in eventlist and summary block

Hi! I have made a change to the excerpt in summary and eventlist, giving the letters a background to resemble a button.

I now want to create some kind of hover effect, which I did (opacity), but it initiates the hover effect for the full with of the summary block or event list (moving the mouse button to the opposite side of summary block initiates hover). I just want it to initiate when the mouse is over the button ( BILLETTER ).

How to accomplish this?

www.morgenkonsert.no

You mean

Initial: change opacity of button

Hover: change opacity to 1

?

Thank you for your reply!

Setting opacity to 1 removes the hover opacity effect completely, and I do want it on the text/button, but not for the whole width of the summary block and event list...

Can this be accomplished? It can also be another kind of hover effect, like shadow or something else.

(see attached pic for a demonstration on how it works now in event list. The same happens in summary block. You can see the hover opacity effect is activated when the mouse pointer is on the same line as the excerpt)

Best,

Sigurd

21 hours ago, sihole said:

Thank you for your reply!

Setting opacity to 1 removes the hover opacity effect completely, and I do want it on the text/button, but not for the whole width of the summary block and event list...

Can this be accomplished? It can also be another kind of hover effect, like shadow or something else.

(see attached pic for a demonstration on how it works now in event list. The same happens in summary block. You can see the hover opacity effect is activated when the mouse pointer is on the same line as the excerpt)

 

Best,

Sigurd

Hi,

You did this with custom code or? If code, can you send it? I think we can adjust it a bit

Yes, I did it with custom code! Here it is:

.eventlist-excerpt a {
    background-color: #194027 !important;
    color: white !important;
      font-family: times !important; 
    font-size: 16pt;
      font: cambria;
    padding: 10px 14px;
    text-decoration: none;
}

.eventlist-excerpt:hover * {
  opacity: 0.85
}