cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you get called away in the middle of writing a post? Don't worry you can find your unfinished post later in the Drafts section of your profile page. X

Locating Images With CSS

Aouellets
9-Granite

Locating Images With CSS

I am working on building out some UI elements for an experience. 

 

Simply, there are buttons at each edge that when clicked with animate in and out a styled panel/grid. 

 

For whatever reason, studio seems to have an invisible div that I cannot edge or remove that is making the top and bottom images sit far from the edge. 

 

See the attached screenshot and classes.

 


.OpenImageTop {
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(270deg);
}

.CloseImageTop {
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(90deg);
}


.OpenImageBottom {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(90deg);
}


.CloseImageBottom {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(270deg);
}

 

1 REPLY 1

maybe  this would help

.position{
  transform-origin: 10px 10px; //value depends
}

 

by the way, I commented out transform: translate(-50%, -50%);

 

 

Top Tags