mkli73

Hello all.

I am quite new in squerspace.

I am trying to my gallery to add my css hover effect.

I tried the following code:

CSS

'

/** 
One CSS file hover effect verson 1.0 
This is the CSS file use for creating the image hover effect and also for caption effect **/

img {
max-width: 100%;
}
.anim-img-box {
max-height: 350px;
max-width: 550px;
overflow: hidden;
margin: 2px 2px;
position: relative;
}
.anim-img-box img {
     opacity: 1;
    -webkit-transition:.5s ;
    -moz-transition: .5s ;
    -o-transition: .5s ;
    -ms-transition: .5s ;
    transition: 0.5s;
}

/**Background Colors **/
.bg-white:hover {
background-color:#FFF;
}
.bg-blue {
background-color: #00008B;
}
.bg-blue1 {
background-color: #473C8B;
}
.bg-blue2 {
background-color: #4A708B;
}
.bg-black {
background-color: #000;
}
.bg-red {
background-color: #C43A46;
}
.bg-red1 {
background-color: #8B0000;
}
.bg-red2 {
background-color: #CD0000;
}
.bg-seagreen {
background-color: #2E8B57;
}
.bg-seagreen1 {
background-color: #43CD80;
}
.bg-seagreen2 {
background-color: #008B45;
}
.bg-darkred {
background-color: #8B0000;
}
.bg-indianred {
background-color: #CD5C5C;
}
.bg-indigo {
background-color: #4B0082;
}
.bg-indigo2 {
background-color: #218868;
}
.bg-violet {
background-color: #8A2BE2;
}
.bg-fuchsia {
background-color: #FF00FF;
}
.bg-orchid {
background-color: #DA70D6;
}
.bg-orchid1 {
background-color: #7A378B;
}
.bg-orchid2 {
background-color: #8B4789;
}
.bg-orchid3 {
background-color: #DA70D6;
}
.bg-magenta {
background-color: #FF00FF;
}
.bg-magenta1 {
background-color: #CD00CD;
}
.bg-magenta2 {
background-color: #8B008B;
}
.bg-maroon {
background-color: #B03060;
}
.bg-maroon1 {
background-color: #8B008B;
}
.bg-maroon2 {
background-color: #8B1C62;
}
.bg-green {
background-color: #31955B;
}
.bg-palegreen {
background-color: #7CCD7C;
}
.bg-palegreen1 {
background-color: #548B54;
}
.bg-aquamarine {
background-color: #458B74;
}
.bg-palevioletred {
background-color: #DB7093;
}
.bg-palevioletred2 {
background-color: #CD6889;
}
.bg-palevioletred3 {
background-color: #8B475D;
}
.bg-purple {
background-color: #8B475D;
}
.bg-purple1 {
background-color: #A020F0;
}
.bg-purple2 {
background-color:#551A8B;
}

/**Animation box hover **/

'

I have chosen the following effect.

"<div class="container">
  <div class="anim-img-box bg-green">
<div class="img-zoom-in"><img src="https://static1.squarespace.com/static/635edfbf8999410437298ba3/t/6373ce8e8a15716bef9696f7/1668533903120/dionysus.jpg" /></div>
<div class="anim-caption cap-from-top">
<h2 class="bg-red">Button larger to smaller</h2>
<div class="anim-link3">
<a class="hvr-green" href="#">Read</a>
</div>
</div>
</div>"

and I received an image that is not 100% height, and you can see the overlay like the attached image.

Could you help me?

See you

Marina

Hello I am trying in redirect one of my domain to my new site.

I use the following code

/https://www.marina-art-box.me/ -> /https://www.marinaklimi.com/ 301

but it does not work.

Can you help me?

Marina

Site URL: https://www.marinaklimi.com/

Hello all.

I am trying to change the following element

"<h3 class="portfolio-title">Unpredictable</h3>"

and I created this css code

<script>
h3 a.portfolio-title {
font-size:25px;
font-color: white;
}

</script>

but nothing changes.

Could you help me?

See you

Marina

Site URL: https://www.marina-art-box.me

Hello all I am a Graphic designer.
I decided to create my portfolio so I will engage more potential clients.
As this is my first attempt I would like to ask you for your feedback.
This is the link of my portfolio.
https://www.marina-art-box.me
All your comments are welcome.
Thanks for your time.
Marina

Site URL: https://dachshund-wolf-mdy7.squarespace.com/

Hello I created the above page and tried to ad a css code for gradient animated background from here

https://www.marksmen.studio/blog/animated-gradient-backgrounds-in-squarespace

This the code I added to t addition tab of the page

"<style>
#collection-626bc772534e5c386dbcaf1c
{ background: linear-gradient(270deg, #e32121, #2004e3);
background-size: 200% 200%;
-webkit-animation: AnimationName 10s cubic-bezier (0.68, 0.55, 0.265, 1) infinite;
-moz-animation: AnimationName 10s cubic-bezier (0.68, 0.55, 0.265, 1) infinite;
animation: AnimationName  10s cubic-bezier (0.68, 0.55, 0.265, 1) infinite;}

</style>

"

Th gradient color appears on begging  but then is back again.

Do I have to do something else?

Thanks.

Marina

Site URL: https://www.marina-art-box.me

At the moment the home page in my site is my "work" page.

I would like to change it and have a new home page that will be a duplicate of the "work".

This page does not have the option "Duplicate the page".

What can I do?

Thanks

Marina