activate arrow on mouse over. - Support | Kriesi.at

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
July 10, 2015 at 1:10 pm #471419
wiwaldi79
Participant
can you help me to activate this arrow http://www.alfaweb.at/testwaldi/wp-content/uploads/2015/06/arrow.png as mouse over in the blog grid here: http://i.imgur.com/X3cl18K.png

i have this code in my style.css but it don`t work?
```
.home #av_section_6 .image-overlay-inside:before,.page-id-14 #av_section_14 .image-overlay-inside:before { 
  background-image: url(https://www.alfaweb.at/testwaldi/wp-content/uploads/2015/06/arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  content: '';
}
```
July 10, 2015 at 3:02 pm #471480
Josue
Inactive Moderator
That’s not avia_section_6 but 7, code should be:
```
.home #av_section_7 .image-overlay-inside:before,.page-id-14 #av_section_14 .image-overlay-inside:before { 
  background-image: url(https://www.alfaweb.at/testwaldi/wp-content/uploads/2015/06/arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  content: '';
}
```
July 10, 2015 at 3:15 pm #471490

wiwaldi79
Participant

That was the error. Thanks Josue :) How can i disable the white overlay at mouse over? i only want the arrow?

and how can i apply this mouse over to all my blog grids by default?

here http://www.alfaweb.at/testwaldi/portraits/mag-dieter-halama/ and here: http://www.alfaweb.at/testwaldi/partnergemeinden/

July 10, 2015 at 3:19 pm #471500
Josue
Inactive Moderator
Use this:
```
#top .image-overlay-inside:before{
    background-image: url(https://www.alfaweb.at/testwaldi/wp-content/uploads/2015/06/arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
}

#top .image-overlay{
    background: transparent;
}
```
Best regards,
Josue
July 10, 2015 at 4:43 pm #471584

wiwaldi79
Participant

Wow. Work perfect.

Some thing to the blog grid. here the images have the correct size: http://www.alfaweb.at/testwaldi/

but here the images are to small and have round edges http://www.alfaweb.at/testwaldi/partnergemeinden/ and here http://www.alfaweb.at/testwaldi/portraits/mag-dieter-halama/

how can i make the blog grid images bigger in size like this and with no round edges: http://www.alfaweb.at/testwaldi/

July 10, 2015 at 4:44 pm #471587

wiwaldi79
Participant

and can you disable the green area in the arrow. that it only appears white? Thanks!!!!!!!

July 10, 2015 at 5:26 pm #471628
Josue
Inactive Moderator
Hey!

1. This code affects the homepage and not the other page, hence the difference:
```
.home #av_section_7 .av_one_fourth {
  margin-left: 2%;
  width: 23.5%;
}
```
One easy fix would be to use a custom class or ID (to sections in both pages) and change the code accordingly (remove .home, and change #av_section_7).

2. Add background: transparent to the overlay code:
```
#top .image-overlay-inside:before{
    background-image: url(https://www.alfaweb.at/testwaldi/wp-content/uploads/2015/06/arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
    background-color: transparent;
}
```
Regards,
Josue
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.