ajustement zoom in image

This commit is contained in:
ouidade 2024-03-21 14:54:17 +01:00
parent a091c7f55a
commit ec28fb3347
4 changed files with 16 additions and 71 deletions

View File

@ -654,16 +654,14 @@ footer {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img {
width: -moz-available;
width: 100%;
height: auto;
z-index: 100; }
height: auto; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover {
filter: brightness(75%);
transition: 0.2s;
cursor: url(../images/noun-loop-3037049.svg), auto;
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
z-index: 100; }
cursor: -webkit-zoom-in; }
@media (max-width: 500px) {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover {
filter: brightness(100%); } }
@ -675,11 +673,15 @@ footer {
transform: scale(1.7);
max-width: 100vw;
overflow-x: scroll;
z-index: 100; }
position: relative;
z-index: 98; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover {
filter: brightness(100%);
transition: 0.2s;
overflow-x: scroll; }
overflow-x: scroll;
cursor: zoom-out;
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out; }
.presentation footer span.totop {
display: inline-flex;

View File

@ -190,7 +190,7 @@
width: -moz-available;
width: 100%;
height: auto;
z-index: 100;
// z-index: 100;
&:hover{
filter: brightness(75%);
transition: 0.2s;
@ -198,7 +198,6 @@
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
z-index: 100;
@media(max-width: 500px){
filter: brightness(100%);
}
@ -211,11 +210,16 @@
transform: scale(1.7);
max-width: 100vw;
overflow-x: scroll;
z-index: 100;
position: relative;
z-index: 98;
&:hover{
filter: brightness(100%);
transition: 0.2s;
overflow-x: scroll;
cursor: zoom-out;
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
}
}
}

View File

@ -1,61 +0,0 @@
{#
/**
* @file
* Default theme implementation to display a paragraph.
*
* Available variables:
* - paragraph: Full paragraph entity.
* Only method names starting with "get", "has", or "is" and a few common
* methods such as "id", "label", and "bundle" are available. For example:
* - paragraph.getCreatedTime() will return the paragraph creation timestamp.
* - paragraph.id(): The paragraph ID.
* - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
* - paragraph.getOwnerId(): The user ID of the paragraph author.
* See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
* and methods for the paragraph object.
* - content: All paragraph items. Use {{ content }} to print them all,
* or print a subset such as {{ content.field_example }}. Use
* {{ content|without('field_example') }} to temporarily suppress the printing
* of a given child element.
* - attributes: HTML attributes for the containing element.
* The attributes.class element may contain one or more of the following
* classes:
* - paragraphs: The current template type (also known as a "theming hook").
* - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
* "Image" it would result in "paragraphs--type--image". Note that the machine
* name will often be in a short form of the human readable label.
* - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
* preview would result in: "paragraphs--view-mode--preview", and
* default: "paragraphs--view-mode--default".
* - view_mode: View mode; for example, "preview" or "full".
* - logged_in: Flag for authenticated user status. Will be true when the
* current user is a logged-in member.
* - is_admin: Flag for admin user status. Will be true when the current user
* is an administrator.
*
* @see template_preprocess_paragraph()
*
* @ingroup themeable
*/
#}
{%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
not paragraph.isPublished() ? 'paragraph--unpublished',
]
%}
{%
set ancre_href = '#paragraph-id--' ~ paragraph.id()
%}
{% block paragraph %}
{# <div{{ attributes.addClass(classes) }}> #}
<div{{ attributes.addClass(classes) }}>
{# <a href="{{ ancre_href }}"> #}
{% block content %}
{{ content }}
{% endblock %}
</a>
</div>
{% endblock paragraph %}