Есть ли возможность наложить прозрачность на часть дизайна ?

Здравствуйте.

Плиз подскажите, возможно ли наложить прозрачность на какую то из частей дизайна или же к примеру на персональную кнопочку ?



Хотелось бы наложить например на какую нибудь кнопочку(см. скрин) такой эффект, чтобы она была сначала прозрачной, а когда на неё курсором наводишь чтобы становилась яркой, т.е прозрачность тут же исчезала. Подобный метод видела в этой теме:

https://help.forum2x2.ru/t20739-topic

Но там речь шла об меню навигации.

Буду благодарна всем кто окажет помощь.

Открываете вашу картинку в фотошопе, делаете её полупрозрачной, сохраняете. Ну а потом ищите по форуму, где то я выкладывал самый элементарный код, чтобы изображение при наведении менялось.Ну или в интернете его поищите.

Kiselboom пишет:Открываете вашу картинку в фотошопе, делаете её полупрозрачной, сохраняете. Ну а потом ищите по форуму, где то я выкладывал самый элементарный код, чтобы изображение при наведении менялось.Ну или в интернете его поищите.

Эм...такой вариант подойдёт лишь для изображений, но и то это слишком другое...к тому же не во всех случаях удастся сделать подобное.
Я видела что можно сделать например баннеры прозрачными, а при наведении они становятся светлыми. Думаю знаю как работает это функция, вроде нужно обернуть баннеры в дивы, а затем задать им через CCS прозрачность до наведении курсором. Я попробовала этот вариант на картинке, но она остаётся прозрачной даже при наведении...Использовала код из темы, которую представила в качестве примера, где есть предполагаемые коды. В интернете искать будет бесполезно, так как там в большинстве случаев коды и скрипты для Ю-зы.

Ок. Ладно, хвастайтесь, что у вас уже есть, какие попытки предпринимали, будем разбираться.

Kiselboom пишет:Ок. Ладно, хвастайтесь, что у вас уже есть, какие попытки предпринимали, будем разбираться.

Оооокей


В общем у меня в виджете стоит такой блок:

Код:

<!--второй блок-->
<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery('.twobutton').click(function(){
    jQuery(this).parent().children('div.twoCont').toggle('normal');
      return false;
    });
  });
</script>

<!--блок с содержимым_2--><div class="two"  style="position:fixed; left: 2px; top:150px;"><div class="twobutton"><img src="http://savepic.org/3373464.png" title="Статистика" alt=""></div><div style="display: none; position: absolute;" class="twoCont">

Здесь стоят баннеры, ага С:

</div></div>
<!--конец второго блока-->


Я оформила его в диви:

Код:

<div class="kontra"> *_* </div>

Код:

<!--второй блок-->
<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery('.twobutton').click(function(){
    jQuery(this).parent().children('div.twoCont').toggle('normal');
      return false;
    });
  });
</script>

<div class="kontra"><!--блок с содержимым_2--><div class="two"  style="position:fixed; left: 2px; top:150px;"><div class="twobutton"><img src="http://savepic.org/3373464.png" title="Статистика" alt=""></div><div style="display: none; position: absolute;" class="twoCont">

Здесь стоят баннеры, ага С:

</div></div>
<!--конец второго блока--></div>

А затем через ССЦ решила задать прозрачность:

Код:

.kontra {
opacity:0.5;
filter:alpha(opacity=50);
}
.kontra {
opacity: 1.0;
filter:alpha(opacity=100);
}

Но блок и изображение лишь покрыты, как бы тонкой плёнкой, и такими остаются, даже если по ним водить курсором...

А с какого перепугу он у вас должен при наведении терять прозрачность? Скрипты мысли читать не умеют. Если хотите через css что-либо при наведении менять, нужно псевдокласс :hover приписывать.

Kiselboom пишет:А с какого перепугу он у вас должен при наведении терять прозрачность? Скрипты мысли читать не умеют. Если хотите через css что-либо при наведении менять, нужно псевдокласс :hover приписывать.

Сделала вот так:

.kontra {
opacity:0.5;
filter:alpha(opacity=50);
}
.kontra :hover {
opacity: 1.0;
filter:alpha(opacity=100);
}

Но не получается....

.kontra:hover {

Пробел убери
пример

---

Правда чтобы оно потом опять погасло, мне приходится полистать вниз или вверх

Смех пишет:
Пробел убери
пример

---

Правда чтобы оно потом опять погасло, мне приходится полистать вниз или вверх

Спасибо большое!
Ну а вот насчёт того что приходиться прокручивать вниз или вверх это проблема...нужно бы как то справиться с этим...

.kontra {
opacity: 0.5;
transition: opacity 0.7s ease-out 0.3s;
-moz-transition: opacity 0.7s ease-out 0.3s;
-webkit-transition: opacity 0.7s ease-out 0.3s;
}
.kontra:hover{
opacity: 1;
}

Пробуй
Регулировка задержки

Смех пишет:
Пробуй
Регулировка задержки

Вот теперь всё круто! Немного настрою и будет ещё окей.
Большое спасибо.
Думаю темку можно закрывать.

всегда к вашим услугам