1

How can I create a background image on hover that is centered and sits behind the text paragraph but ontop of the gradient animation?

https://codepen.io/glittergirl/pen/mjopmW

img{
display: none;
max-width: 50%;
opacity: 0.5;
filter: alpha(opacity=50);
justify-content: center;
}

span:hover + img{
display: block;
}

.photo img{
max-width: 30%;
opacity: 0.5;
filter: alpha(opacity=50); 
}

Oh and lastly if anyone knows why my rotated text isn't being effected by my styling?? driving me crazy

glittergirl
  • 525
  • 3
  • 17
  • it's good to ask one question at a time ... – Temani Afif Aug 13 '18 at 10:05
  • duplicate of the first one : https://stackoverflow.com/questions/48237586/linear-gradient-is-repeating-itself-on-body-tag/48237995#48237995 and https://stackoverflow.com/questions/48858633/background-image-not-centering-keeps-repeating/48862362#48862362 – Temani Afif Aug 13 '18 at 10:05
  • duplicate of the last question : https://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean – Temani Afif Aug 13 '18 at 10:06

1 Answers1

1

Add this css in your code, it will work

p { position:relative; z-index:1;}

img{ position: fixed; z-index: 0; opacity: 1; left: 50%; transform: translate(-50%, -50%); top: 50%; }
Ashok Kumar
  • 63
  • 5