Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Products
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

Simple HTML script works in preview only, stops working when the page is saved

Piotr Rajewski
Piotr Rajewski
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
Get involved
November 25, 2024

I'm pasting a simple HTML script for an image overlay effect and it works smooth when I check in the preview. However, when I save my edits to the page, the effect is killed and it does not show properly. Surprisingly, when I go to edit again and check preview it is working fine again. Just not when I save changes.

[EDIT] is there perhaps any other simple method to have image overlay on hover? This one may not work when due to security reasons in my organisation.

This is the code:

<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
</style>
</head>
<body>

<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="https://alm-confluence.systems.uk.hsbc/confluence/download/attachments/401548207/image-2024-6-13_18-54-20.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

 

Answer
Watch
Like Be the first to like this
35 views

2 answers

1 vote
Jimi Wikman
Jimi Wikman
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
November 25, 2024

I suggest you create a bug for this.

If the form does not sanitize the input in preview mode, then you are executing code in the platform and that can be a security issue. While they probably are sanitizing some code, this is still not ok because it is a way to execute code and that should not be possible.

It also causes confusion if the output in preview is different from the end result, as you have experienced.

Reply
1 vote
marc -Collabello--Phase Locked-
marc -Collabello--Phase Locked-
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
Become a leader
November 25, 2024

Most likely the following happens:

  • after preview you save your html
  • when rendering within Confluence, the html gets sanitized and not everything gets rendered.
  • in preview everything gets rendered again
Reply

Suggest an answer

Log in or Sign up to answer
Confluence
Confluence
TAGS
AUG Leaders

Atlassian Community Events

    See all events