parallax effect on font size while change div

user_10841318 0
Viewed 46

I want to decrease the font size of first div and increase the font size of the second div.

top1 { 
    transform: translateX(-7em);
    font-size: 1.2em !important ;}

#txt{
    margin: 10px;
    border-radius: 9px;
    backdrop-filter: blur(8 px) saturate(171%);
    -webkit-backdrop-filter: blur(5px) saturate(171%);
    border: 1px solid ;
    border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(34, 136, 156, 0.7) rgba(34, 136, 156, 0.7);
    box-shadow: 0px 0px 12px 2px rgb(135, 167, 185);
    -webkit-box-shadow: 0px 0px 12px 2px rgb(182, 145, 158);
    -moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,1);
    background:rgba(238, 221, 221, 0.85);
    padding: .5em 1em ;
    color: rebeccapurple;
    font-size: .7em;
}

https://codepen.io/tiwari_ashuism/pen/WNOjbgO

css html
1 Answers

Both div elements have the same id="txt" and this id has a font-size of 0.7em which you need to delete. Use the classes to apply different font-size for each div class.

    #txt{
    margin: 10px;
    border-radius: 9px;
    backdrop-filter: blur(8 px) saturate(171%);
    -webkit-backdrop-filter: blur(5px) saturate(171%);
    border: 1px solid ;
    border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(34, 136, 156, 0.7) rgba(34, 136, 156, 0.7);
    box-shadow: 0px 0px 12px 2px rgb(135, 167, 185);
    -webkit-box-shadow: 0px 0px 12px 2px rgb(182, 145, 158);
    -moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,1);
    background:rgba(238, 221, 221, 0.85);
    padding: .5em 1em ;
    color: rebeccapurple;
}

.top1 { 
    transform: translateX(-7em);
    font-size: 1.5em !important ;
}

.top2 {
    transform: translateX(7em);
    font-size: 1.1em !important;
}
user_146189670
Related