Как ще стане тази рамка?

[misho]

Някой има ли идея как мога да направя такава рамка около снимката?

Искам на около 5px навътре в снимката да има полупрозрачна рамка, която при посочване да си променя прозрачността. Не ме устройва да рисувам рамката върху снимките и да им правя два варианта.

 

[tahys]

Правиш си 2 снимки с 2 рамки ... задаваш на индекса z-index по голям от този на снимката на рамката така тя ще е пред снимката ;-)... при минаване на мишката отгоре да се сменя картинката на рамката.... Мисля че така трябва да стане

 

[dashe]

1 див който ще е рамката.

opacity:.6;
-moz-opacity:0.6;
filter:alpha(opacity='60');

Вече си слагаш там бекграйнд на рамката както искаш да е... ала бала..
И вътре ще се слага самата снимка..Тоест в дива.

<div class="ramka"><img src="" alt="" .. /></div>

http://www.w3schools.com/Css/css_image_transparency.asp

 

[misho]

Как точно ще стане, като се има предвид, че не знам точните размери на снимката? Имам зададени граници за височината, но ширината зависи от снимката. :?

Както ти е казаз Dashe , самоче задавап на дива float:left; по този начин дива ще се разпъва според <img /> тага

 

[dashe]

Как точно ще стане, като се има предвид, че не знам точните размери на снимката? Имам зададени граници за височината, но ширината зависи от снимката. :?

.ramka {
border: 5px solid #fff;
height: точните пиксели;
opacity:.6; 
-moz-opacity:0.6; 
filter:alpha(opacity='60');
}

<div class="ramka"><img ..... /></div>

???
Или дай снимка направо нещо за пример...
2-3 снимки примерно?

или направо

<img src="snimka.jpg" class="ramka" alt="" />

 

[dELux_nike]

http://snipplr.com/view/45665/an-inside-border-with-opacity-on-a-div-with-a-background-image/

 

[misho]

dELux_nike, точно това търсих. Възникнаха, обаче, два проблема:
1. Не мога да задам размери на снимката. Реално снимката е, например, 800х600 пиксела, а аз искам да се вижда 160х120. Но вместо снимката да се свие, всъщност се виждат само горните леви 160х120 пиксела.
2. Не мога да ги наредя на един ред. Излизат ми една под друга. Когато дам display: inline; на някой от div-овете или и на двата, снимката изчезва. :shock:

 

[misho]

Първия проблем го реших. Остана втория. :?

2. Не мога да ги наредя на един ред. Излизат ми една под друга. Когато дам display: inline; на някой от div-овете или и на двата, снимката изчезва. :shock:

Промяна:
Проблемът идва от gallery_img класът. Въпреки, че съм му задал ширина, той е с ширината на родителския му div.

<div class="gallery_img" style="width: 160px; height: 120px; background-image: url(http://localhost/trx/img/upload/c5531fce7eec1f55a2d8fe1f32c933e9_tmp.jpg); "/>

Промяна:
С една таблица го направих. Благодаря! :?:

 

[svet1bg]

Това може и да ти помогне :

ДЕМО

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
     <head>
          <script type="text/javascript" src="jquery.js"></script>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <title>RAMKA</title>
          <style>


               #snimka {
                    position:absolute;
                    left:25%;
                    top:15%;
                    width:500px;
                    height:646px;
                    background-image:url('pic.jpg');
                    background-repeat:no-repeat;

               }

               #ramka{
                    width:470px;
                    height:616px;
                    border:15px #387C44 solid;
                    opacity:0.4;
                    position:absolute;
                    left:25%;
                    top:15%;
               }

          </style>
          <script type="text/javascript">
               $(function(){
                    $("#ramka").mouseover(function(){
                         $("#ramka").css("opacity", 1);
                    });

                    $("#ramka").mouseout(function(){
                         $("#ramka").css("opacity", 0.4);
                    });
               });
          </script>
     </head>
     <body>
          <center>


               <div id="d">
                    <div id="snimka" >
                    </div>
                    <div id="ramka">
                    </div>
               </div>
          </center>
     </body>
</html>